-
13739719116
-
-
微信小程序开发常见问题分析
距离微信小程序内测版公布已经存有十几天的时间了，网上对微信小程序的探讨也异常火热，从公布至现在微信小程序一直攻占着各种技术论坛的头条，当然各种平台也对微信小程序存有新闻报道，毕竟腾讯在国内影响力还是非常大的。我们都晓得微信小程序第一天公布内测版，并没官方官方研发文档和开发工具，但是这阻止不了技术人的好奇心。
因为自己对小程序也就是很有兴趣的，感觉就是很有意思的一个东西，所以立马搞了一下大demo，水平非常有限，所以搞的过程也就是一个自学的过程，一个提升的过程。
这篇文章主要写下我在写下demo的过程中碰到的一些问题。如果写作此文的你存有一定协助，很就是欣喜。
一：项目结构
微信小程序项目结构主要存有四个文件类型,如下
WXML （WeiXin Markup Language）就是框架设计的一套标签语言，融合基础组件、事件系统，可以构筑出来页面的结构。内部主要就是微信自己定义的一套组件。
WXSS (WeiXin Style Sheets)就是一套样式语言，用作叙述 WXML 的组件样式，
js 逻辑处置，网络命令
json 小程序设置，例如页面登记注册，页面标题及tabBar。
特别注意：为了便利开发者增加布局项，规定叙述页面的这四个文件必须具备相同的路径与文件名。
在根目录下以app去命名的这四中类型的文件，就是程序入口文件。
app.json
必须必须存有这个文件，如果没这个文件，项目无法运转，因为微信框架把这个做为配置文件入口，整个小程序的全局布局。包含页面登记注册，网络设置，以及小程序的window背景色，布局导航条样式，布局预设标题。
app.js
必须必须存有这个文件，没也就是可以收起！但是这个文件创建一下就行及 什么都不须要写下
以后我们可以在这个文件中监听并处置小程序的生命周期函数、声明全局变量。
app.wxss
全局布局的样式文件，项目非必须。
晓得小程序基本文件结构，就可以已经开始研究官方demo了，研究过程中如果存有不明白的地方可以回去官方文档谋求答案，如果打听没答案或者存有疑点，可以再此博客帖子，相互交流。下面了解下发生概率较低的几个问题。
二：常见问题
rpx（responsive pixel）
微信小程序崭新定义了一个尺寸单位，可以内置相同分辨率的屏幕，它规定屏幕阔为750rpx，例如在 iPhone6 上，屏幕宽度为375px，共计750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
这个项目我用的都就是rpx尺寸单位，期间碰到一个很奇葩的问题。在相连的两条信息轻易都会存有一个分割线，我将线的高度都设置成1rpx,但是不存有个别分割线就是不表明的，如下图
看见没在第一条和第二条轻易并没现实这条线，但是其他的都展现了，分割线的属性就是一样的，而且在相同的手机上（分辨率相同）不表明的分割线也就是相同的，有的分辨率好几条分割线都不表明，不晓得这就是模拟器的bug还是rpx的bug。最后分割线的高度尺寸单位采用了px,化解了这个问题。
40013错误
在微信小程序刚出的时候如果输出AppID提示信息这个信息就则表示没化解，但是现在官方软件更新可以挑选无AppID研发，如下图，我们之间挑选无AppID，即可化解此错误。建议加装官方开发工具。可以回去此处打听浏览链接。
4058错误
微信小程序建立项目时挑选无AppID，建立项目时会分解成app.json，app.josn就是程序启动最重要的文件，程序的页面登记注册，窗口设置，tab设置及网络命令时间设置都就是在此文件下的。如果你建立的项目目录下没app.json文件就可以报下面的错误。
我们看见上面的错误信息中有个数字-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.
大概意思就是当前页面没此处置，使确认与否已经定义，还表示了错误发生的可能将边线pages/message/message,其实这种问题发生通常就是我们在wxml定义了一些处理事件，但是在js文件中没同时实现这个时事件的处置方法，就可以发生这个错误。那么我们按提示信息在js文件加之事件处理，如下代码，加之后就不能重蹈覆辙此错误提示信息。
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不表明。
tabBar的list中没写下pagePath字段，或者pagePath中的页面没登记注册
tabBar的list的pagePath选定的页面没写下在登记注册页面第一个。微信小程序的逻辑就是”pages”中的第一个页面就是首页，也就是程序启动后第一个表明的页面，如果tabBar的list的pagePath选定的页面都不是pages的第一个，当然也就不能电视tabBar了。
tabBar的数量高于两项或者低于五项，微信官方中明确规定tabBar的至少两项最多五项。少于或者多于都不能表明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”: “音乐”
}
wx.navigateTo无法关上页面
一个应用领域同时就可以关上5个页面，当已经关上了5个页面之后，wx.navigateTo无法正常关上新页面。恳请防止多层级的交互方式，或者采用wx.redirectTo
本地资源无法通过 css 以获取
background-image：可以采用网络图片，或者 base64，或者采用标签
页面间数据传达
微信小程序路由（页面重定向）就是通过API wx.navigateTo或者wxml中组件同时实现的，不管哪种同时实现都会存有一个关键的参数就是url，它选定了为重定向的页面，并且页面之间数据传达也就是通过url去同时实现的，这个数据传达有点类似我们采用的get网络命令，把参数都堆叠在必须重定向界面地址的后面并以“？”相连接。然后将要传至的数据以键和值的形式新增在”?”后面，多个参数轻易用”&”合乎。例如我们页面消息聊天记录，将列表上的数据传至下一个页面，可以这样写下。
而数据发送就是在js文件的page里发送的，page生命周期存有一个onLoad函数，它就是搞一些初始化数据的工作，onLoad函数存有一个参数options，我们就可以通过key将数据以获取，如下
/** 作者：dushao
* 新浪微博：http://weibo.com/dushaoxiaoxiao
* 博客 : http://www.takozhang.cn
* */
*
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"
})
},
})
这样就同时实现了页面间数据传达功能。
数据IDC、软件开发、网站建设开发、系统开发、微信小程序开发、APP移动开发、SAAS定制开发、系统二开等。全行业互联网软件开发解决方案，产品经理一对一沟通需求。