应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

微信小程序开发常见问题分析

发布时间:2024-01-01 00:00 浏览次数:25

距离微信小程序内测版公布已经存有十几天的时间了,网上对微信小程序的探讨也异常火热,从公布至现在微信小程序一直攻占着各种技术论坛的头条,当然各种平台也对微信小程序存有新闻报道,毕竟腾讯在国内影响力还是非常大的。我们都晓得微信小程序第一天公布内测版,并没官方官方研发文档和开发工具,但是这阻止不了技术人的好奇心。


因为自己对小程序也就是很有兴趣的,感觉就是很有意思的一个东西,所以立马搞了一下大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网络命令,把参数都堆叠在必须重定向界面地址的后面并以“?”相连接。然后将要传至的数据以键和值的形式新增在”?”后面,多个参数轻易用”&”合乎。例如我们页面消息聊天记录,将列表上的数据传至下一个页面,可以这样写下。









{{item.title}}




{{item.message}}





{{item.time}}


{{item.count}}






而数据发送就是在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"


})


},


})


这样就同时实现了页面间数据传达功能。

TAG标签:
阅读推荐