/** Author: Code4Android

  • Project address: github.com/xiehui999/S…
  • Sina Weibo: weibo.com/745687294
  • CSDN: blog.csdn.net/xiehuimx?vi…
  • Jane: www.jianshu.com/users/d5b53…
  • * /

Distance from micro channel small program internal test version has been released for ten days, online micro channel small program discussion is also extremely hot, from the release to now micro channel small program has occupied the headlines of various technical forums, of course, various platforms have news reports on micro channel small program, after all, Tencent is still very influential in China. We all know WeChat small program on the first day of release beta version, and no public official document development and development tools, but this will not stop the curiosity of people technology, through the crack and install the old version first, then use the new version covers installed a series of process, can experience the glamour of the WeChat applet, then in order to make less little detours, So I wrote the micro channel small program development environment construction article. However, the second day after the article was published, wechat officially released the official document and updated the development tool. Without · AppID, you can also experience the development of small programs. Because they also very interested to a small program, feel is one of the interesting things, so try to QQ, do a high imitation QQ WeChat small program, because I am a Android developer, who seldom contact with front end of something, level is limited, so many parts of the code is not standard, the process of doing is also a learning process, A process of improvement.

This article mainly describes some problems I encountered in the process of SmallAppForQQ project. If you have some help in reading this article, I am very glad to welcome the STAR project.

SmallAppForQQ source

The development tools

The official demo

The project structure

The beginning, to briefly introduce the project structure, if not installed development tools, can go to GitHub:github.com/xiehui999/S… Download. Wechat small program project structure mainly has four file types, as follows

  • WXML (WeiXin Markup Language) is a set of tag Language designed by the framework, which can be combined with the basic components and event system to build the structure of the page. The interior is mainly a set of components defined by wechat itself.

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

  • Js logic processing, network request

  • Json applet Settings such as page registration, page title, and tabBar.

Note: To make it easier for developers to reduce the number of configuration items, specify that all four files on the description page must have the same path and filename.

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

  • Json must have this file, without this file, the project will not run, because the wechat framework uses this as the entry to the configuration file, the global configuration of the entire applet. Including page registration, network Settings, as well as the window background color of the applet, configure the navigation bar style, configure the default title.

  • App.js must have this file, it will also error! But this file is created and nothing needs to be written and then we can listen and handle the life cycle functions of the applet and declare global variables in this file.

  • App.wxss global configuration style file, project is not required.

If you know the basic file structure of the small program, you can start to study the official demo. During the research process, if you don’t understand, you can go to the official document for answers. If you can’t find answers or have questions, you can leave a message on this blog and communicate with each other. Here are some of the problems with high probability.

Q&A

RPX (Responsive Pixel)

It defines the screen width as 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, so 750rpx = 375px = 750 physical pixels. 1rpx = 0.5px = 1 physical pixel.

In this project, I used RPX size units, and I encountered a strange problem. There will be a dividing line directly in the two adjacent messages. I set the height of each line to 1rpx, but it will not be displayed unless there are some dividing lines, as shown below

See not directly in the first and the second is not the reality that line, but the other shows, line attribute is the same, and in different resolution (different) don’t show on your mobile phone line is different, some resolution several line didn’t show, don’t know what is this simulator of bugs or the RPX bug. Finally, the height unit of the dividing line is PX, which solves this problem.

40013 error

When the small program of wechat just came out, if you input AppID and prompt this information, it means that there is no cracking. But now the official software update can choose to develop without AppID, as shown in the picture below. We can choose no AppID to solve this error. You are advised to install official development tools. Find the download link here.

4058 error

App. Josn is the most important file for program startup. Page registration, window Settings, TAB Settings and network request time Settings of the program are all under this file. The following error is reported if you do not have the app.json file in your project directory.

We see that there is a number in the error message above -4058, which should be the first micro channel small program encountered the most errors, this kind of file is usually missing, there is a path behind, you can look at the path to see if there is this file. This error is usually caused by the incorrect directory chosen to create the project, or by registering a non-existent page in app.json. There are also cases where pages registered in the app.json file are not created, or you delete a page but do not unregister it, which will result in a -4058 error.

Page registration error

This error may be easy to understand, page registration error. Page is rendered by Page object, each Page corresponding js file must create Page, the simplest way is to write Page({}) under the JS file, in Page management Page rendering life cycle, as well as data processing, events are done in this. This error is usually caused by the creation of the page, js file and processing or forgot to process. So get into the habit of creating the Page in the JS file at the same time you create the Page.

Page the route error

There are two ways of routing in wechat: one is to use components in WXML file, and the other is to call wx.navigateTo. The following code:

WXML file:

<navigator url="search/search">
<view class="serach_view_show" bindtap="bindtap">search</view>
</navigator>Copy the code

Js file event handler:

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

If you write this, congratulations, you will see the error above, this is caused by repeatedly calling the route, the handling method is to delete a route, delete the component, or delete the wx.navigateTo. In addition to the possible routing error mentioned above, there is another case similar to the following code

<navigator url="search/search">
<navigator url="search/search">
<view class="serach_view_show" bindtap="bindtap">search</view>
</navigator>
</navigator>Copy the code

This is also not allowed, that is, components cannot be nested within components. It can only exist in a single layer.

Do not have * handler in current page.

Pages /message/message. This is usually the case when we define some processing events in WXML, but do not implement the processing method in js file. This error will occur. So we add event handler to js file as prompted, the following code, after adding this will not have this error message.

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

TabBar is not displayed

For tabBar does not display, there are many reasons, to find this error directly go to the app.json file, the most common is also just learning wechat small program is most likely to make the following errors

The registration page writes the page to the Pages field of app.json, as in

 "pages": ["pages/message/message"."pages/contact/contact"."pages/dynamic/dynamic"."pages/dynamic/music/music"."pages/index/index"."pages/logs/logs"
  ]Copy the code

  • TabBar is not displayed because of a tabBar writing error. The uppercase letter B is lowercase, causing tabBar not to be displayed.

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

  • TabBar’s list pagePath specifies a page that is not written first on the registration page. The logic of wechat applet is that the first page in “Pages” is the home page, that is, the first page displayed after the program starts. If tabBar list pagePath specified pages are not the first page, of course, there will be no TV tabBar.

  • The number of Tabbars is lower than two or higher than five. Wechat official clearly stipulates that tabBar has at least two items and at most five items. TabBar will not be displayed for more or less.

NavigationBarTitle shows the problem

Write the picture description here

When you click on music to enter the music interface, WeChatForQQ is displayed as title first and then the music is displayed. This experience must be unacceptable because the title of the music interface is set in the page lifecycle method in the JS file. If you don’t know the life cycle, you can check it out

Page({
  data: {// text:" This is a page"
  },
  onLoad:function(options){
    // initialize the page. Options specifies the parameters for page hopping

  },
  onReady:function(){
    // The page is rendered
    //NavigationBarTitle If both here and the JSON file are set, display the title bar here last
wx.setNavigationBarTitle({
  title: 'music'})},onShow:function(){
    // Page display
  },
  onHide:function(){
    // The page is hidden
  },
  onUnload:function(){
    // Page closed}})Copy the code

As you can see from the comments, the title is set in the onReady method, that is, the page has been rendered, and the title displayed before onReady is the title in the JSON file (overrides the relationship, if you set the title in the child page JSON file, it overrides the app.json global Settings). You might say wx.setNavigationBarTitle in the onLoad function, but that’s not the right thing to do because the page is rendered after the onLoad execution, and the title is read from the JSON file when the page is rendered. The title that causes the onLoad setting will only be displayed before the page renders, and then the tiles of the JSON file will be displayed, so now you can see that the best thing to do with ttle is to write a JSON file to the child file, write in the file, and if you want to change the color you can just add it to the file, The property values written to this file override the values set in app.json.

{
    "navigationBarTitleText": "Music"
}Copy the code

Wx. navigateTo cannot open the page

Wx. NavigateTo can only open five pages at a time, and when five pages are open, wx. NavigateTo can’t open new pages properly. Avoid multi-tiered interactions, or use wx.redirectTo

Local resources cannot be obtained using the CSS

Background-image: You can use network images, or base64, or useThe label

Data transfer between pages

NavigateTo oR WXML components, no matter which implementation will have an important parameter is URL, it specifies the page to jump to, and data transfer between pages is also through THE URL to achieve, This data pass is similar to the get network request we use, concatenating the parameters after the address to jump to and ending with “?” The connection. The incoming data is then appended as keys and values to the “?” After that, multiple parameters are matched directly with “&”. If we click on the message chat record to transfer the data from the list to the next page, we can write:

 <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>Copy the code

The data is received in the PAGE of the JS file. There is an onLoad function in the page life cycle, which does some initialization of data. The onLoad function has a parameter options, and we can obtain data by key, as follows

/ * * the author: Code4Android * project address: https://github.com/xiehui999/SmallAppForQQ * sina weibo: http://weibo.com/745687294 * CSDN: Jane: http://blog.csdn.net/xiehuimx?viewmode=contents * http://www.jianshu.com/users/d5b531888b2b/latest_articles * * /
Page({
  data: {// text:" This is a page"
    isHiddenToast:true
  }
  onLoad:function(options){
    // initialize the page. Options specifies the parameters for page hopping
    console.log(options.title)
     console.log(options.message)

  },
  onReady:function(){
    // The page is rendered
  },
  onShow:function(){
    // Page display
  },
  onHide:function(){
    // The page is hidden
  },
  onUnload:function(){
    // Page closed
  },
  bindtap:function(event){
wx.navigateTo({
  url: "/pages/message/search/search"})}})Copy the code

This enables data transfer between pages.

Well, today wrote this later if you encounter some other problems in micro channel small program, I will add to this article, if you encounter more pit problems in the development process has been solved, you can comment in this article, convenient for everyone. Thank you for your support.