Detailed explanation of the WeChat applet of high imitation QQ

This article mainly writes about some of the problems I encountered during the progress of the SmallAppForQQ project. I hope reading this article will be helpful to you.

SmallAppForQQ: A WeChat applet for accessing QQ

At the beginning of the article, let’s briefly introduce the project structure. If you don’t have the development tools installed, you can go to

github. com/xiehui999/SmallAppForQQ

Download. There are four main file types in the WeChat mini program project structure, as follows -

1) WXML file: (Weixin Markup Language) is a set of descriptive tag languages ​​designed by WeChat on the basis of predecessors. Build a view of the applet.

2) WXSS file: (WeiXin Style Sheets) is a style language used to describe the style of view components in wxml,

3) js file: business logic processing, and back-end Perform data interaction, etc.

4) json file: Mini program settings file, such as page registration, page title, etc.

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.

app.json

This file, in the root directory, is the program entry file.

This file must be present. Without this file, the project cannot run because the WeChat framework uses this as the configuration file entry and the global configuration of the entire mini program. Including page registration, network settings, and the window background color of the mini program, etc.

app.js

This file must be present, otherwise an error will be reported! But just create this file. You don’t need to write anything.

In the future, we can monitor and process the life cycle functions of the applet and declare global variables in this file.

app.wxss

Globally configured style file, not required for the project.

If 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. Here are some problems that are more likely to occur -

Frequently asked questions rpx (responsive pixel)

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

(rpx is not a newly defined size unit in WeChat. It has been used in mobile development before. WeChat has absorbed the strengths of many schools and defined a small program development framework based on the predecessors. And Like Apple, Apple used Objective-C as the development language for Apps when it opened the AppStore, but OC was not invented by Apple)

I used rpx size units for this project, and encountered a very strange thing during the process. The problem. 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 figure below

, it is not shown in the first one. There is no actual line like the second one, but the others all show 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, and some resolutions are different. Several dividing lines are not displayed. I don’t know if this is a bug of the simulator or a bug of rpx. Finally, the height size unit of the dividing line is px, which solves this problem. (You may wish to use rpx for layout and px for decorative styles. It has not been verified in practice.)

40013 Error

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

(At present, individual developers can also apply for mini programs, appId is no longer scarce, no such trouble)

-4058 error (app.json file is missing)

WeChat mini program When the program creates a project, select No AppID. App.json will be generated when the project is created. 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 under this 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 kind of error is usually caused by missing files. There is a path behind it, which can be corrected. Check the path to see if the 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, there is another situation where 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, we must develop the habit of creating a Page first in the js file when creating a page.

Page route error

Literally means page routing error. There are two routing methods in WeChat. One is to use components in the wxml file, and the other is to call wx.navigateTo.

The following code——

wxml：

Search

js：

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

If you write like this, congratulations, you You will see the error prompted above, which is caused by repeated calls to the route. The solution is to delete a route, delete the component or delete wx.navigateTo. In addition to the above mentioned possible routing errors, there is another situation similar to the following code

Search

This is also not allowed, which means that the navigator component cannot be nested inside. Component navigator.

Do not have * handler in current page.

The general meaning is that the current page does not have this handler, let's confirm whether it has been defined, and also point out the possible location of the error pages/message/message, In fact, this kind of problem usually occurs when we define some processing events in wxml, 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(e){
wx.navigateTo({
url:"search/search"})
},

tabBar setting is not displayed

There are many reasons for the tabBar not being displayed. To find this error, go directly to the app.json file. The most common one is also the easiest one to make when just learning the WeChat applet. The errors are nothing more than the following -

The registration page writes 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"]

1、tabBar The tabBar is not displayed due to a writing error. The uppercase letter B is written in lowercase, causing the tabBar to not be displayed.

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

3. The page specified by the pagePath of the tabBar list is not written as the first registered page. The logic of the WeChat applet is that the first page in "pages" is the first page, 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 in pages, Of course, there will be no TV tabBar.

5. The number of tabBar is less than two items or more than five items. WeChat official clearly stipulates that the number of tabBar items should be at least two items and at most 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 clicking music to enter the music interface, the title first displays WeChatForQQ and then displays the music. This experience is definitely unacceptable. , the reason is that the title of the music interface 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

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

You should understand through the comments that the setting title is written in the onReady method, that is, the page has been rendered, before onReady The displayed title is the title in the json file (overwriting relationship, if the title is set in the sub-page json file, it will override the app.json global setting). You may say that wx.setNavigationBarTitle is written in the onLoad function, but this setting is incorrect because the page is rendered after onLoad is executed. When rendering the page, the title will be read from the json file, causing the title set by onLoad to be only It is displayed before page rendering, and then the tile of the json file is displayed. So now you should understand that the best place to set ttle is to write a json file for the sub-file and write it in the file. If you want to change the color, add it directly to the file. Yes, the property values ​​written in this file will override the values ​​set in app.json.

{
"navigationBarTitleText":"音乐"}

The title of the window depends on three places:

1, App title setting in app.json

2, Title setting in the json file with the same name of the page

3, js code is set through wx.setNavigationBarTitle interface

If the title is static, set it through 2. If the window itself is dynamic and the title depends on the parameters passed in, such as the scale ID, then it is best to set the navigationBarTitleText in 1 to empty and then move it in js. Note that empty settings will affect all pages.

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.

To be simpler, it is recommended to use wx.redirectTo, and then develop a small program single-page application, a single-page application, just like the single-page website in the prehistoric period of PC websites.

Regarding the opening limit of wx.navigateTo5 pages, is there any tool or solution to solve it?

navigateTo is limited to five levels, which actually stipulates that the elements in the page stack cannot exceed five. After the number of elements in the page stack reaches five, no more elements can be added. For a detailed description of the mini program page stack, please read this article:

www.ifanr.com/minapp/744601

This article does not give a solution. The coder gives a theoretical solution here:

1, use redirectTo for every jump, and only use it in js. When used in wxml, it is also used by binding the event first and using it in the event

function.

2，自已实现一个页面栈，每次跳转之前，先推进这个自定义的页面栈。

3，不使用wx.navigateBack，从自定义页面栈中取出一个页面，redirectTo

这样就实现了无级跳转。小程序官方的机制，适用于简单的、层级不多的场景。使用如上自定义栈，好处还有减少内存占用，因为永远都是redirectTo。

本地资源无法通过 css 获取

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

页面间数据传递

微信小程序路由（页面跳转）是通过API wx.navigateTo或者wxml中组件实现的，不管哪种实现都会有一个重要的参数就是url，它指定了要跳转的页面，并且页面之间数据传递也是通过url来实现的，这个数据传递有点类似于我们使用的get网络请求，把参数都拼接在要跳转界面地址的后面并以“？”连接。然后将要传入的数据以键和值的形式追加在"?"后面，多个参数直接用"&"符合。如我们点击消息聊天记录，将列表上的数据传到下一个页面，可以这样写。

{{item.title}}
{{item.message}}
{{item.time}}
0}}">{{item.count}}

而数据接收是在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"})
},
})

这样就实现了页面间数据传递功能。

另外，听说支付宝也开始搞小程序了，连IDE都很像微信小程序开发工具：

文档页：

从“小程序”这个名字来看，因为“程序”是通用名词，而“小”本身没有独特性，所以任何公司申请“小程序”商标估计都难以获得商标管理局的通过，这也就意味着任何公司都可以做自己的“小程序”平台。

The above is the detailed content of Detailed explanation of the WeChat applet of high imitation QQ. For more information, please follow other related articles on the PHP Chinese website!