Code4Android：微信小程序体验历程：我遇到的问题及解决方法

因为自己对小程序也就是很有兴趣的，感觉就是很有意思的一个东西，所以以QQ赖草，搞一个高仿QQ的微信小程序，由于本人就是Android开发者，平时很少碰触前端的一些东西，水平非常有限，所以代码很多地方就是不规范的，搞的过程也就是一个自学的过程，一个提升的过程。

这篇文章主要写下我在SmallAppForQQ这个项目进展的过程中碰到的一些问题。如果写作此文的你存有一定协助，很就是欣喜，热烈欢迎star项目。

SmallAppForQQ源码

开发工具

官方demo

项目结构

文章结尾，先直观了解下项目结构，若没加装开发工具，克吕齐勒GitHub:https://github.com/xiehui999/SmallAppForQQ浏览。微信小程序项目结构主要存有四个文件类型,如下

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将数据以获取，如下

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" }) }, })

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

不好了，今天就写下至这了后期若碰到微信小程序其它一些问题，我会新增至此文，若你在研发过程中碰到比较坑的问题已经解决方案，可以在本文评论，便利大家。谢谢积极支持。