Summarize the problems encountered in mini program development

Summary of the problem:
(1) The problem of using rpx for the height of the dividing line
There will be a dividing line directly between two adjacent pieces of information. Set the height of the line to 1rpx. The two previous dividing lines are not displayed, but the others are displayed. The attributes of the dividing lines are the same, and the dividing lines that are not displayed on different mobile phones (different resolutions) are also different. Some resolutions have multiple lines. The dividing lines are not displayed. I don’t know if this is a bug in the simulator or a bug in rpx. Solution: The height size unit of the dividing line uses px, which solves this problem.

(2) Page registration problem
This error may be easy to understand, page registration error. The page is rendered through the Page object. The js file corresponding to each page must create a page. The simplest way is to write Page({}) under the js file. The life cycle of page rendering is managed in the page, and Data processing and events are all completed here. The reason for this error is usually that the page has just been created and the js file has not been processed or has been forgotten.
Solution: Get into the habit of creating a Page in the js file first when creating a page.

(3) Page route error
Caused by repeated calls to the route, the solution is to delete a route, delete component or delete wx.navigateTo.

(4) Don't have * Handle in current page.
In fact, this kind of problem usually occurs when we define some processing events in wxml, but the processing of this event is not implemented in the js file. method, this error will occur. Then we follow the prompts and add event processing to the js file
Solution: Don’t miss any method to call the event

(5) TabBar is set not to be displayed
There are many reasons why the tabBar is not displayed , to find this error, go directly to the app.json file

The page is not registered in app.json

tabBar is not displayed due to incorrect writing, and the uppercase letter B is written in lowercase, resulting in tabBar does not display

The pagePath field is not written in the list of tabBar, or the page in pagePath is not registered

The page specified by the pagePath of the list of tabBar is not written as the first one on the registration page. The logic of the WeChat applet is that the first page in "pages" is the homepage, which is the first page displayed after the program is started. If the page specified by the pagePath of the tabBar list is not the first page of pages, of course it will The tabBar will not be displayed.

The number of tabBar is less than two items or more than five items. WeChat official clearly stipulates that the tabBar must have at least two items and a maximum of five items. The tabBar will not be displayed if it is more than or less than.

(6) wx.navigateTo cannot open the page
An application can only open 5 pages at the same time. After 5 pages have been opened, wx.navigateTo cannot open a new page normally. Please avoid multi-level interactions, or use wx.redirectTo

(7) Local resources cannot be obtained through css
background-image: You can use network images, or base64, or use

(8) Page data transfer
WeChat applet routing (page jump) is implemented through the API wx.navigateTo or the component in wxml, no matter which implementation will An important parameter is the url, which specifies the page to be jumped, and the data transfer between pages is also implemented through the url. This data transfer is somewhat similar to the get network request we use. The parameters are spliced ​​into the page to be jumped. Go to the end of the interface address and connect it with "?" Then append the data to be passed in the form of key and value after "?", and multiple parameters are directly matched with "&". You can write it like this

<navigator url="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">
<view class="item" >
<view class="item-left">
<image src="{{item.url}}" class="image"/>
</view>
<view class="item-middle">
<view>
<text class="title">{{item.title}}</text>
</view>
<view>
<text class="message">{{item.message}}</text>
</view>
</view>
<view class="item_right">
<view><text class="time">{{item.time}}</text></view>
<view class="mark" wx:if="{{item.count>0}}"><text class="text">{{item.count}}</text></view>
</view>
</view>
<view class="line"></view>
</navigator>

The data is received in the page of the js file. The page life cycle has an onLoad function, which does some work of initializing the data. The onLoad function has a parameter options, and we can Obtain data through key, as follows

onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
console.log(options.title) //这里是接收参数
console.log(options.message)
},

This realizes the data transfer function between pages.

The above is the detailed content of Summarize the problems encountered in mini program development. For more information, please follow other related articles on the PHP Chinese website!