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.
Globally configured style file, not required for the project.
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
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中文网！
c/s architecture and b/s architecture
How to solve javascriptvoid(o)
The difference between threads and processes
Why is my phone not turned off but when someone calls me it prompts me to turn it off?
word forced line break
vbnet tutorial
How to adjust mouse sensitivity
linux scheduled shutdown command
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
