我们都知道微信小程序第一天发布内测版，并没有公开官方开发文档和开发工具，但是这阻止不了技术人的好奇心，通过破解以及先安装旧版本再用新版本覆盖安装一系列流程，即可体验微信小程序的魅力，当时为了使更少的人少走弯路，于是自己就写了微信小程序开发环境搭建一文。不过在文章发布第二天微信官方正式发布了官方文档，并且更新了开发工具，无·appid也可以体验小程序的开发。
因为自己对小程序也是很有兴趣的，感觉是很有意思的一个东西，所以以QQ练手，做一个，由于本人是Android开发者，平时很少接触前端的一些东西，水平有限，所以代码很多地方是不规范的，做的过程也就是一个学习的过程，一个提高的过程。

我们看到上面的错误信息中有个数字-4058，这应该是初入微信小程序遇到最多的错误了，这种一般都是文件缺失，后面有个path，可以对着该路径看看是否存在这个文件。造成这种错误的原因一般都是创建项目选择的目录不正确，或者在app.json注册了一个不存在的页面。
当然还有一种情况就是在app.json文件的pages注册的页面是没有创建的，或者你删除了某个页面，但是没有取消注册也会是-4058错误。

Page注册错误

这个错误可能很容易理解，页面注册错误。页面是通过Page对象来渲染的，每个页面对应的js文件必须要创建page，最简单的方式就是在js文件下写入Page({})，在page中有管理页面渲染的生命周期，以及数据处理，事件都在这完成。这个错误引起的原因一般都是刚创建页面，js文件还有有处理或者忘了处理。所以要养成创建页面的同时在js文件先创建Page的习惯.

Page route错误

字面意思就是页面路由错误，在微信中有两种路由方式一种是在wxml文件使用组件，一种是调用wx.navigateTo。
如下代码：

wxml文件：


 搜索

js文件事件处理函数：

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

如果你这样写的话，恭喜你，你就会看到上面提示的错误，这是因为重复调用路由引起的，处理方法就是删除一个路由，删除组件或者删除wx.navigateTo。除了上面说的可能导致路由错误外，还有一种情况，类似于下面的代码



 搜索

这种也是不允许的，也就是说组件内部不能再嵌套组件。它只能是单层存在的。

Do not have * handler in current page.

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

tabBar设置不显示

对于tabBar不显示，原因有很多，查找这个错误直接去app.json这个文件，最常见的也是刚学习微信小程序最容易犯的错误无外乎下面几种

注册页面即将页面写到app.json的pages字段中，如

 "pages":[

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

tabBar写法错误导致的不显示，将其中的大写字母B写成小写，导致tabBar不显示。

navigationBarTitle显示问题

通过这个动态图你应该发现问题了，当点击音乐进入音乐界面时，title先显示了WeChatForQQ然后显示的音乐，这个体验肯定是难以接受的，原因是音乐界面的title是在js文件中page的生命周期方法中设置的。

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": "音乐"
}

 

 

 
 

 {{item.title}}


{{item.message}}



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

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

/**作者：Code4Android
 * 项目地址：https://github.com/xiehui999/SmallAppForQQ
 * 新浪微博：http://weibo.com/745687294
 * CSDN:http://blog.csdn.net/xiehuimx?viewmode=contents
 * 简书 : http://www.jianshu.com/users/d5b531888b2b/latest_articles
 * */
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"
})
},
})

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

好了，今天就写到这了后期若遇到微信小程序其它一些问题.

作者：Code4Android
链接：http://www.jianshu.com/p/99071193bfe8

仿QQ微信小程序！我趟过的微信小程序开发坑

项目结构

常见问题

rpx（responsive pixel）

40013错误

-4058错误

Page注册错误

Page route错误

tabBar设置不显示

navigationBarTitle显示问题

wx.navigateTo无法打开页面

本地资源无法通过 css 获取

页面间数据传递

相关推荐