距离微信小程序内测版公布已经存有十几天的时间了,网上对微信小程序的探讨也异常火热,从公布至现在微信小程序一直攻占着各种技术论坛的头条,当然各种平台也对微信小程序存有新闻报道,毕竟腾讯在国内影响力还是非常大的。我们都晓得微信小程序第一天公布内测版,并没官方官方研发文档和开发工具,但是这阻止不了技术人的好奇心。
因为自己对小程序也就是很有兴趣的,感觉就是很有意思的一个东西,所以立马搞了一下大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"
})
},
})
这样就同时实现了页面间数据传达功能。