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

距离微信小程序内测版发布已经有十几天的时间了，网上对微信小程序的讨论也异常火爆，从发布到如今微信小程序一直占领着各类技术论坛的头条，固然各类平台也对微信小程序有新闻报道，毕竟腾讯在国内影响力仍是很大的。咱们都知道微信小程序第一天发布内测版，并无公开官方开发文档和开发工具，可是这阻止不了技术人的好奇心。

由于本身对小程序也是颇有兴趣的，感受是颇有意思的一个东西，因此立马作了一下小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。除了上面说的可能致使路由错误外，还有一种状况，相似于下面的代码

<navigator url="search/search">
<navigator url="search/search">
<view class="serach_view_show" bindtap="bindtap"> 搜索</view>
</navigator>
</navigator>

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

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网络请求，把参数都拼接在要跳转界面地址的后面并以“？”链接。而后将要传入的数据以键和值的形式追加在"?"后面，多个参数直接用"&"符合。如咱们点击消息聊天记录，将列表上的数据传到下一个页面，能够这样写。

<navigator url="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">
          <view class="item" >
             <view class="item-left">
                  <image src="{{item.url}}" class="image"/>
             </view>
             <view class="item-middle">
                  <view>
                       <text class="title">{{item.title}}</text>
                  </view>
                  <view>
                      <text class="message">{{item.message}}</text>
                  </view>
            </view>
            <view class="item_right">
                <view><text class="time">{{item.time}}</text></view>
                <view class="mark" wx:if="{{item.count>0}}"><text class="text">{{item.count}}</text></view>
            </view>
         </view>
         <view  class="line"></view>
       </navigator>

而数据接收是在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"
})
  },
})

这样就实现了页面间数据传递功能。 好了，今天就写到这了后期若遇到微信小程序其它一些问题，我会追加到此文，若你在开发过程当中遇到比较坑的问题已经解决方案，可在个人微博或者邮箱留言。谢谢支持。