Analysis of Frequently Asked Questions in WeChat Mini Program Development

It has been more than ten days since the internal beta version of the WeChat Mini Program was released, and the discussion on the WeChat Mini Program has been extremely hot online. From its release to now, the WeChat Mini Program has been occupying the headlines of various technical forums, and of course various platforms There are also news reports on WeChat mini programs. After all, Tencent still has a great influence in the country. We all know that the WeChat mini program released an internal beta version on the first day and did not disclose official development documents and development tools, but this cannot stop the curiosity of technical people.

Because I am also very interested in small programs and I think it is a very interesting thing, so I immediately made a small demo. The level is limited, so the process of doing it is also a learning process and an improvement process.
This article mainly writes about some problems I encountered while writing the demo. I would be very happy if it was helpful to you reading this article.

1: Project structure

The WeChat applet project structure mainly has four file types, as follows

WXML (WeiXin Markup Language) is a set of tag languages ​​designed by the framework. Combined with basic components and event systems, the page can be constructed structure. Internally, it is mainly a set of components defined by WeChat itself.

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

js logic processing, network requests

json applet settings, such as page registration, page title and tabBar.

Note: In order to facilitate developers to reduce configuration items, it is stipulated that the four files describing the page must have the same path and file name.

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

app.json

Must have this file. Without this file, the project cannot run, because the WeChat framework uses this as the configuration file entry, the global configuration of the entire mini program. Including page registration, network settings, and the window background color of the mini program, configuring the navigation bar style, and configuring the default title.

app.js
You must have this file, otherwise an error will be reported! But just create this file and you don’t need to write anything. In the future, we can monitor and process the life cycle functions of the mini program and declare global variables in this file.

app.wxss

Globally configured style file, not required for the project.

Once you know the basic file structure of the mini program, you can start studying the official demo. If there is anything you don’t understand during the research process, you can go to the official documentation for answers. If you can’t find the answer or have questions, you can leave a message on this blog to communicate with each other. . Here are some problems that are more likely to occur.

Two: Frequently Asked Questions

rpx (responsive pixel)

The WeChat applet has newly defined a size unit that can adapt to screens with different resolutions. It stipulates that the screen width is 750rpx. For example, on iPhone6, the screen width is 375px , there are 750 physical pixels in total, then 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.

I used rpx size units for this project, and encountered a very strange problem during the process. There will be a dividing line directly between two adjacent pieces of information. I set the height of the line to 1rpx, but if there is no individual dividing line, it will not be displayed. As shown in the picture below

, you can see that it is not in the first and second lines. There is no actual line directly, but others have shown that the attributes of the dividing line are the same, and the dividing lines that are not displayed on different mobile phones (different resolutions) are also different. Some resolutions have multiple divisions. No lines are displayed. I don’t know if this is a bug in the simulator or a bug in rpx. Finally, the height size unit of the dividing line is px, which solves this problem.

40013 error

When the WeChat applet first came out, if you enter the AppID and prompt this information, it means it is not cracked, but now the official software update can choose to develop without AppID, as shown below, we can solve this problem by choosing without AppID. mistake. It is recommended to install official development tools. You can find the download link here.

4058 error

Select No AppID when creating a WeChat applet project. App.json will be generated when creating the project. app.josn is the most important file for program startup. The program’s page registration, window settings, tab settings and network request time settings are all here. under the file. If there is no app.json file in the project directory you created, the following error will be reported.

We see that there is a number -4058 in the above error message. This should be the most common error encountered when first entering the WeChat applet. This type of error is usually due to missing files. There is a path behind it, and you can look at the path. Check to see if this file exists. The reason for this error is generally that the directory selected to create the project is incorrect, or a non-existent page is registered in app.json.
Of course, another situation is that the page registered in the pages of the app.json file is not created, or you delete a page but do not cancel the registration, which will also cause a -4058 error.

Page registration error

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. Therefore, you must develop the habit of creating a Page in the js file first when creating a page.

Page route error

literally means page routing error. There are two routing methods in WeChat. One is to use the wxml file

The following code :
wxml file:

js file event processing function:
bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
}
If you write like this, congratulations, You will see the error prompted above, which is caused by repeated calls to the route. The solution is to delete a route, delete

266bfe00d64d5d8041f83dc05ad995337aadf44668f9555fca79fc0482b4a3eb98258ab69c649490dc69230af4439f89 Searchde5f4c1163741e920c998275338d29b29a67f2adf02d82de7f8f0475590779aa9a67f2adf02d82de7f8f0475590779aa

This is also not allowed, that is to say

Do not have * handler in current page.

Probably means that the current page does not have this handler, let's confirm whether it has been defined, and also point out the possible location where the error occurs pages/message/message. In fact, this kind of problem usually occurs when we define it in wxml Some processing events are provided, but if the event processing method is not implemented in the js file, this error will occur. Then we follow the prompts and add event processing to the js file, as shown below. After adding it, this error message will no longer appear.

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

The tabBar setting does not display

There are many reasons for the tabBar not displaying. To find this error, go directly to the app.json file. The most common ones and the most common mistakes when just learning WeChat mini programs are none other than the following
The registration page is to write the page into the pages field of app.json, such as

"pages":[ "pages/message/message", "pages/contact/contact", "pages/dynamic/dynamic", "pages/dynamic /music/music", "pages/index/index", "pages/logs/logs"
]

tabBar is not displayed due to incorrect writing. The uppercase letter B is written in lowercase, causing the tabBar to not be displayed.
The pagePath field is not written in the tabBar list, or the page in the pagePath is not registered.
The page specified by the pagePath of the tabBar list is not written first 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 There is no TV tabBar anymore.
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.

navigationBarTitle display problem

You should find the problem through this dynamic diagram. When you click on music to enter the music interface, the title first displays WeChatForQQ and then displays the music. This experience is definitely unacceptable, because the title of the music interface is It is set in the life cycle method of the page in the js file.
If you don’t understand the life cycle, you can click to view it

 Page({
data:{
// text:"这是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){    // 页面渲染完成
    //NavigationBarTitle如果此处和json文件都设置，最后展示此处的标题栏wx.setNavigationBarTitle({
  title: '音乐'})
  },
  onShow:function(){    // 页面显示
  },
  onHide:function(){    // 页面隐藏
  },
  onUnload:function(){    // 页面关闭
  }
})

通过注释你应该明白了，设置标题写在了onReady方法中，也就是页面已经渲染完成了，在onReady之前显示的title就是json文件（覆盖关系，如果在子页面json文件设置title会覆盖app.json全局设置）中的title。可能你会说将wx.setNavigationBarTitle写在onLoad函数中，不过如果这样设置是不对的，因为onLoad执行过后才渲染页面，在渲染页面时title会从json文件中读取，导致onLoad设置的title会只在页面渲染之前展示，之后就显示json文件的tile，所以现在你应该明白ttle设置最优的地方就是给子文件写一个json文件，在文件中写入，如果想改变颜色直接在文件中添加就可以，该文件所写的属性值会覆盖app.json中设置的值。

{
"navigationBarTitleText": "音乐"
}

wx.navigateTo无法打开页面

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo

本地资源无法通过 css 获取

background-image：可以使用网络图片，或者 base64，或者使用标签

页面间数据传递

微信小程序路由（页面跳转）是通过API wx.navigateTo或者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>

而数据接收是在js文件的page里接收的，page生命周期有一个onLoad函数，它就是做一些初始化数据的工作，onLoad函数有一个参数options，我们就可以通过key将数据获取，如下

Page({
  data:{    // text:"这是一个页面"
    isHiddenToast:true
  }
  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数
    console.log(options.title)     console.log(options.message)
  },
  onReady:function(){    // 页面渲染完成
  },
  onShow:function(){    // 页面显示
  },
  onHide:function(){    // 页面隐藏
  },
  onUnload:function(){    // 页面关闭
  },
  bindtap:function(event){
wx.navigateTo({
  url: "/pages/message/search/search"})
  },
})

这样就实现了页面间数据传递功能。
更多微信小程序开发常见问题分析相关文章请关注PHP中文网！