WeChat applet FAQ Summary (405840013) and solutions

Summary of common problems of applets (405840013) and solutions

FAQs about applets:

I. project structure

The applet project structure mainly has four file types:

WXMLWeiXin Markup Language (WeiXin Markup Language) is a set of tag languages designed by the Framework. Combined with basic components and event systems, you can build a page structure. A set of components is defined internally.

WXSS(WeiXin Style Sheets) is a Style language used to describe WXML component styles,

Js logic processing and network requests

JsonApplet settings, such as page registration, page title, and tabBar.

Note: To reduce configuration items for developers, the four files on the page must have the same path and file name.

The four types of files named by the app in the root directory are program entry files.

App. json

This file must be available. If this file is not available, the project cannot be run, because the framework uses this file as the configuration file entry and global configuration of the entire applet. Including page registration, network settings, and the background color of the applet window, configuring the navigation bar style, and configuring the default title.

App. js

This file must be available. If not, an error is returned! But this file does not need to be written after it is created.
In the future, we can listen to and process the lifecycle functions of the applet and declare global variables in this file.

App. wxss

The global configuration style file. The project is not required.

If you know the basic file structure of the applet, you can start to study the official demo. If you have any questions during the study, you can go to the official documentation to find the answer. If you cannot find the answer or have any questions, you can leave a message on this blog to communicate with each other. The following describes several problems with high probability.

Ii. FAQs

Rpx (responsive pixel)

The applet defines a new size unit that can adapt to screens of different resolutions. It specifies that the screen width is 750rpx. For example, on iPhone 6, the screen width is 375px, with a total of 750 physical pixels, 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.

I used rpx units for this project, and encountered a very strange problem. There is a split line directly in the two adjacent lines. I set the line height to 1rpx, but no individual split lines are not displayed.

The first line and the second line do not have a reality, but the other lines are displayed. The split line has the same attributes and is displayed on different mobile phones (with different resolutions) the split lines that are not displayed are also different. Some resolutions do not display several split lines. I don't know whether this is a simulator bug or a rpx bug. The height unit of the split line uses px, which solves this problem.

Error 40013

When the mini-program comes out, if you enter the AppID prompt, this information indicates no cracking, but now the official software update can choose no AppID development, for example, we choose no AppID, this error can be solved. We recommend that you install the official development tool. You can find the download link here.

Error 4058

When the applet creates a project, it selects no AppID. when the project is created, an app is generated. json, app. josn is the most important file for program startup. The page registration, window settings, tab settings, and network request time settings of the program are all under this file. If the project directory you created does not contain the app. json file, the following error is reported.

We can see that the error message above contains a number-4058, which should be the most common error encountered by the initial small program. This is generally because the file is missing, followed by a path, you can check whether the file exists in the path. The cause of this error is generally that the directory selected for creating the project is incorrect, or a non-existent page is registered in app. json.

Of course, there is also a situation where pages registered in the app. json file are not created, or you have deleted a page, but you have not canceled the registration, it will also be a-4058 error.

Page registration error

This error may be easy to understand. It is a page registration error. Pages are rendered by Page objects. The js file corresponding to each page must be created. The simplest way is to write Page ({}) under the js file ({}), in the page, you can manage the lifecycle of page rendering and process data. All events are completed here. This error is generally caused by the creation of a page, and the js file is still processed or forgotten to be processed. Therefore, we need to develop the habit of creating a Page first in a js file while creating a Page.

Page route Error

It is a page Routing Error. There are two routing methods:

The following code:

Wxml file:

Js file event processing functions:

bindtap:function(event){wx.navigateTo({url: "search/search"})}

If you write it like this, congratulations, you will see the error shown above. This is caused by repeated route calls. The solution is to delete a route and delete it.

<Navigator url = "search/search"> <navigator url = "search/search"> <view class = "serach_view_show" bindtap = "bindtap"> search </view> </ navigator> </navigator>

This is not allowed, that is

Do not have * handler in current page.

This probably means that the current page does not have this processing, so that you can determine whether it has been defined, and also pointed out the possible location of the error pages/message, in fact, this problem usually occurs when we define some processing events in wxml, but this error will occur if the current event is not implemented in the js file. Then we add the event processing in the js file as prompted. The following code will not be followed by this error prompt.

 bind:function(event){  wx.navigateTo({   url: "pages/logs/logs"  }) },

TabBar settings are not displayed

There are many reasons why tabBar is not displayed. To find this error, go directly to the app. json file. The most common error is the most common one that is the easiest to make when learning a small program.

The registration page writes the page to the pages field of app. json, as shown in figure

"pages":[  "pages/index/index",  "pages/logs/logs",  "pages/account/account",  "pages/more/more" ],

TabBar is not displayed due to incorrect writing. The uppercase letter B is written in lowercase, so that tabBar is not displayed.

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

The page specified by pagePath in the list OF tabBar is not written in the first registration page. The logic of the applet is that the first page in "pages" is the homepage, that is, the first page displayed after the program starts, if the page specified by pagePath in the list OF tabBar is not the first page of pages, of course, it will not be TV tabBar.
The number of tabBar items is less than two or more than five. It is clearly specified on the official website that at least two tabBar items can be up to five. If the value exceeds or is less than the value of tabBar, no tabBar is displayed.

NavigationBarTitle display problems

Through this dynamic graph, you should find the problem. When you click the music to enter the music interface, the title first displays WeChatForQQ and then the music displayed. This experience is certainly unacceptable, the reason is that the title in the music field is set in the page lifecycle method in the js file.
If you do not know the lifecycle, click to view

Page ({data: {// text: "This is a Page"}, onLoad: function (options) {// parameters brought about by Page initialization options for Page navigation}, onReady: function () {// page rendering completed // NavigationBarTitle if both the content here and the json file are set, the title bar wx is displayed. setNavigationBarTitle ({title: 'account'})}, onShow: function () {// page display}, onHide: function () {// page hide}, onUnload: function () {// page closed }})

You should understand through annotations that the title is written in the onReady method, that is, the page has been rendered. The title displayed before onReady is a json file (overwrite relationship, if the title is set in the json file on the sub-page, the app will be overwritten. json global settings. You may say that. setNavigationBarTitle is written in the onLoad function. However, this setting is incorrect because the page is rendered only after onLoad is executed. The title will be read from the json file during page rendering, as a result, the title set by onLoad will be displayed only before page rendering, and then the tile of the json file will be displayed. Therefore, you should understand that the best setting of ttle is to write a json file to the sub-file, write Data in the file. If you want to change the color and add it directly to the file, the attribute value written in the file will overwrite the app. the value set in json.

{"NavigationBarTitleText": "Account "}

Wx. navigateTo cannot open the page

One application can only open five pages at the same time. After five pages have been opened, wx. navigateTo cannot open a new page normally. Avoid Multi-layer interaction or use wx. redirectTo

Local resources cannot be obtained through css

Background-image: You can use network images, base64, or tags.

Data transfer between pages

The applet routing (page Jump) is through the API wx. navigateTo or wxml

 <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>

While data is received in the page of the js file, the page lifecycle has an onLoad function, which is used to initialize data. The onLoad function has a parameter options, we can obtain the data through the key, as shown below:

Page ({data: {// text: "This is a Page" isHiddenToast: true} onLoad: function (options) {// The console of the Page initialization options parameter for Page Jump. log (options. title) console. log (options. message)}, onReady: function () {// page rendering complete}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closing}, bind: function (event) {wx. navigateTo ({url: "pages/logs "})},})

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!