preface

From small procedures, to now there are more than a year of time, from the time promised to replace APP, to the recent realized the function of APP and small program to jump, positioning also quietly into the APP a supplement, is real to force, like the uninstalled the worship and the group’s APP, think only small program is the colleague, And then they put the APP back. Why? Because the small program only realized part of the functions of the original APP, finally found that the APP is convenient to use, after all, now the mobile phone memory is basically 32G, an APP can not occupy much space.

Technology is endless, life is not idle, open the text.

Technology stack

  • Wechat applets

  • WePY

  • weappx

The official document of wechat small program has been very detailed. After several updates, small program now supports custom components, introduces plug-ins of other developers and external resources, and has a set of small program language WXS. According to the official document, the running speed of small program on IOS is 2~20 times faster than JavaScript. Components and apis are getting better and better.

WePY is a small program component-based development framework developed by a Tencent team. The first update was made on November 23, 2016, which was earlier than the release date of the small program on January 9, 2017. That is to say, when the small program was tested in Tencent, some big guy who likes Vue used it and found that it was not cool enough to develop, even the components did not support it. And then the guy got a bunch of guys together and said, hey guys, let’s make a framework so that we can use vue-like development for small programs, and then you get the idea. If you know Vue, it’s a matter of minutes. It supports Props, Custom events, component distributed reuse mixins, computed property functions, template content distribution slot, and more.

Weappx state management framework is a small program, wepy and native small procedures, can be used API and the Dva, Vuex like, but is simpler than them two, Dva already compress the number of the API to six, it is more hard to just four API can fit in the API, though less as state management framework, Compared with the current 9000 or more STARS of Dva, the 50 or more stars involved in Dva are somewhat shabby. If I feel I am doing something good after USING Dva, I would like to provide mental support to the author.

Potholes encountered and development considerations

1. The repeat tag nested two or more levels of component pass value to the self-component pass value problem

This issue is actually a bug of Wepy. Many people have mentioned Issues on Github, but the official explanation has not been given. After my own exploration, there are two solutions:

  1. For pure components, use the applet native template template instead

The second loop in the child component is written this way, using template directly

<template wx:key="{{index}}" wx:for="{{item.giftBoxs}}" wx:for-item="giftBoxsItem" data="{{... giftBoxsItem}}" is="indexMoItem"></template>
Copy the code

Introduce this template on the main page

<import src=".. /.. /components/giftIndex/indexMoItem.wxml"/>
Copy the code

Wepy ends up packing all the referenced component code into a home page, so you can just import templates there

  1. The first solution solves this problem and saves a lot of code, but it’s a mix of Wepy and native applets. Another solution is found later

For the values to be passed through the second loop, wrap the first layer with the repeat tag

<repeat for="{{ [item] }}" key="item.orderNo" index="index" item="itemval"> <giftItem :itemval="itemval" ></giftItem> </repeat>
Copy the code

Wepy Issues have been answered, and an old iron point like, should be to help him solve the problem

2. Pass values such as Object.key to child components

Normal by value

// Data = {textMsg1:'text1',
    textMsg2: {
      text: 'text2'},} // component <child: MSG ="textMsg1"></child>
Copy the code

The interface display

Pass a value in an object

<child :msg="textMsg2.text"></child>
Copy the code

The interface display

<repeat for="{{ [textMsg2.text] }}">
   <child :msg="item"></child>
</repeat>
Copy the code

3. Applets development tools slow down

In the development process, as the project file gets bigger and bigger, you will find that the development tool of the small program gets slower and slower, and even a jump takes several seconds to pass. In this case, you need to delete the file dist folder that the small program packaged, and then repackage, which is much faster. Wepy also provides a command, Running NPM Run Clean directly can achieve the same effect.

4. Small program preview on the mobile phone, the phenomenon of lag

This can happen for a number of reasons. If you’ve worked with native applets before, it’s common to click the preview button on the developer tool and then swipe your phone to preview. However, with Wepy, when you run the NPM run dev command, The code in dist folder is not compressed and optimized, so the mobile phone preview will be very slow. Run NPM Run build to preview the production package, which can be solved.

5. Data is updated, UI view is not updated

This is also related to the development environment and the production environment, this situation is relatively rare, in the development of the address module, after the development tool to select the address, and change the data in the model, but the view is not updated, this phenomenon only occurs in the development environment, the production environment everything is normal.

6. Some mobile phones have different styles

This problem occurs because wepy scaffolding is not configured with style autocompletion. You need to configure it manually by adding the following code to wepy.config.js

module.exports.plugins = {
    'autoprefixer': {
      filter: /\.wxss$/,
      config: {
        browsers: ['last 11 iOS versions']}}}Copy the code

7. The problem of using the same component data multiple times across the same page

If you use the same component multiple times on the same page, give it a different name, as this official document explains.

It is important to note that WePY components are in the static components, is a component ID as a unique identifier, each ID corresponding to a component instance, when the page is introduced into two components of the same ID, these two components share the same instance with the data, when one of the component data changes, another will change together.Copy the code

This has to do with the component mechanism of Wepy,

// data
data = {
    textMsg1: 'text1',
    textMsg3: 'text3',
    textMsg2: {
      text: 'text2'},} // component <child: MSG ="textMsg1"></child>
 <child :msg="textMsg3"></child>
Copy the code

Normal logic would have shown text1 and text3, but

 <view class="containers"> <view> I am the data passed by the child </view> : {{$child$msg}}
</view>
<view class="containers"> <view> I am the data passed by the child </view> : {{$child$msg}}
</view>
Copy the code

We can see this in AppData in the development tool

Data = {} // Render the first component data.$child$msg = 'text1'// Render the second component data.$child$msg = 'text3'

Copy the code

Comment out the second component, and the first one will appear normal

We give the component a different name and the display will render as expected

// Mount component components = {child1: Child, child2: Child}; <child1 :msg="textMsg1"></child1>
<child2 :msg="textMsg3"></child2> // after compiling <view class="containers"> <view> I am the data passed by the child </view> : {{$child1$msg}}
</view>
<view class="containers"> <view> I am the data passed by the child </view> : {{$child2$msg}}
</view>
Copy the code

We can see that the display is working, and we can see that when we look at data

8. Incorrect state data changes are reported in retry PX

In the process of using symptomatic px, data in state can only be changed in mutations. If data is changed elsewhere, an error will be reported, Uncaught (in promise) TypeError: Cannot assign to read only property ‘count’ of object ‘#’, Cannot assign to read only property ‘count’ of object ‘#’, Cannot assign to read only property ‘count’ of object ‘#’. In order to avoid inadvertently modify data, the above error

Use feeling

1. Vue grammar is used, which is friendly to beginners and fast to get started. However, we still need to learn the API of small program, the framework is not very perfect, and there are many holes to fill

2. Use state management framework to centrally manage logic code, realize the sharing of different page states, and improve development efficiency

3. Clear code structure, interface, logical code and static page separation, convenient for multi-person cooperation and later maintenance

4. There are too many input libraries, resulting in large project volume

conclusion

In general, if the project is relatively simple, it is not recommended to use, direct use of native small program to develop more efficient; If the project is large and near, and requires multi-person cooperation, this framework can be adopted, the development efficiency is relatively high, the quality is also ok; If the time is enough for the quality is also relatively high, it is still using the native small program to develop, now the small program has been more perfect, there is no need to use a third party framework to develop.