脚本之家

仿QQ微信小程序!我趟过的微信小程序开发坑

上一篇
微信小程序知乎日报开发实例讲解
下一篇
微信小程序知乎日报完整版源码

我们都知道微信小程序第一天发布内测版,并没有公开官方开发文档和开发工具,但是这阻止不了技术人的好奇心,通过破解以及先安装旧版本再用新版本覆盖安装一系列流程,即可体验微信小程序的魅力,当时为了使更少的人少走弯路,于是自己就写了微信小程序开发环境搭建一文。不过在文章发布第二天微信官方正式发布了官方文档,并且更新了开发工具,无·appid也可以体验小程序的开发。
因为自己对小程序也是很有兴趣的,感觉是很有意思的一个东西,所以以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物理像素。

image.png

这个项目我用的都是rpx尺寸单位,期间遇到一个很奇葩的问题。在相邻的两条信息直接都会有一个分割线,我将线的高度都设置成1rpx,但是不有个别分割线是不显示的,如下图

image.png

看到没在第一条和第二条直接并没有现实这条线,但是其他的都展示了,分割线的属性是一样的,而且在不同的手机上(分辨率不同)不显示的分割线也是不同的,有的分辨率好几条分割线都不显示,不知道这是模拟器的bug还是rpx的bug。最后分割线的高度尺寸单位使用了px,解决了这个问题。

40013错误

image.png

微信小程序刚出来的时候如果输入AppID提示这个信息就表示没有破解,但是现在官方软件更新可以选择无AppID开发,如下图,我们之间选择无AppID,即可解决此错误。建议安装官方开发工具。可去此处找下载链接

image.png

-4058错误

微信小程序创建项目时选择无AppID,创建项目时会生成app.json,app.josn是程序启动最重要的文件,程序的页面注册,窗口设置,tab设置及网络请求时间设置都是在此文件下的。如果你创建的项目目录下没有app.json文件就会报下面的错误。

image.png

我们看到上面的错误信息中有个数字-4058,这应该是初入微信小程序遇到最多的错误了,这种一般都是文件缺失,后面有个path,可以对着该路径看看是否存在这个文件。造成这种错误的原因一般都是创建项目选择的目录不正确,或者在app.json注册了一个不存在的页面。
当然还有一种情况就是在app.json文件的pages注册的页面是没有创建的,或者你删除了某个页面,但是没有取消注册也会是-4058错误。

Page注册错误

image.png

这个错误可能很容易理解,页面注册错误。页面是通过Page对象来渲染的,每个页面对应的js文件必须要创建page,最简单的方式就是在js文件下写入Page({}),在page中有管理页面渲染的生命周期,以及数据处理,事件都在这完成。这个错误引起的原因一般都是刚创建页面,js文件还有有处理或者忘了处理。所以要养成创建页面的同时在js文件先创建Page的习惯.

Page route错误

image.png

字面意思就是页面路由错误,在微信中有两种路由方式一种是在wxml文件使用<navigator />组件,一种是调用wx.navigateTo。
如下代码:

wxml文件:

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

js文件事件处理函数

  bindtap:function(event){
wx.navigateTo({
  url: "search/search"
})
  }

如果你这样写的话,恭喜你,你就会看到上面提示的错误,这是因为重复调用路由引起的,处理方法就是删除一个路由,删除<navigator />组件或者删除wx.navigateTo。除了上面说的可能导致路由错误外,还有一种情况,类似于下面的代码

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

这种也是不允许的,也就是说<navigator/>组件内部不能再嵌套<navigator/>组件。它只能是单层存在的。

Do not have * handler in current page.

image.png

大概意思就是当前页面没有此处理,让确定是否已经定义,还指出了错误出现的可能位置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,或者使用<image/>标签

页面间数据传递

微信小程序路由(页面跳转)是通过API wx.navigateTo或者wxml中<navigator/>组件实现的,不管哪种实现都会有一个重要的参数就是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将数据获取,如下

/**  作者:Code4Android
 *   项目地址:https://github.com/xiehui999/SmallAppForQQ
 *   新浪微博:http://weibo.com/745687294
 *   CSDN  :    http://blog.csdn.net/xiehuimx?viewmode=contents
 *   简书   :   http://www.jianshu.com/users/d5b531888b2b/latest_articles
 * */
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"
})
  },
})

这样就实现了页面间数据传递功能。

好了,今天就写到这了后期若遇到微信小程序其它一些问题.    


作者:Code4Android
链接:http://www.jianshu.com/p/99071193bfe8

以上就是仿QQ微信小程序!我趟过的微信小程序开发坑的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

仿QQ微信小程序!我趟过的微信小程序开发坑 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
微信小程序知乎日报开发实例讲解
下一篇
微信小程序知乎日报完整版源码

您可能感兴趣的小程序源码教程

小程序源码

从0开始一步一步用Laravel5.2集成原生微信支付

目前微信支付集成到框架里面有太多的坑了,项目中刚好遇到一个,把经验和重要的坑写出来,一步一步从0开始,大家有什么不会的可以留言。1.首先,我们要去官方下载人家做好的DEMO,链接是https://pay.weixin.qq.com/w

小程序源码

微信小程序知乎日报完整版源码

小程序刚刚出来不就就火爆了整个前端圈,咱也不干落后的研究了一下,网上找了个”知乎日报API接口“做了个小项目练手,基本上还算完整的实现了整个项目,欢迎starfork,由于小程序对HTML的不支持,详情页做了些简单的过滤

小程序源码

仿QQ微信小程序!我趟过的微信小程序开发坑

我们都知道微信小程序第一天发布内测版,并没有公开官方开发文档和开发工具,但是这阻止不了技术人的好奇心,通过破解以及先安装旧版本再用新版本覆盖安装一系列流程,即可体验微信小程序的魅力,当时为了使更少的人

小程序源码

微信小程序!火车票查询源码

写在最前面微信小程序自九月份推出内测资格以来,经历了舆论热潮到现在看似冷清,但并不意味着大家不那么关注或者不关注了。我想不管是否有内测资格,只要是感兴趣的开发者已经进入潜心耕耘产品的阶段了,至少是静下

小程序源码

从零开始写个一个豆瓣电影小程序

微信小程序内测至今也有20天左右,也有很多人作出了很多不错的DEMO并发布到github了。前几日看见了豆瓣电影这个demo,感觉很不错,也跟着做了一个,作为复习巩固文档API用。

小程序源码

微信小程序之ES6与事项助手源码

由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码中。好久没有写关于微信小程序的随笔了

小程序源码

微信小程序之知乎日报源码

上一次的《微信小程序之小豆瓣图书》制作了一个图书的查询功能,只是简单地应用到了网络请求,其他大多数小程序应有的知识。而本次的示例是知乎日报,功能点比较多,页面也比上次复杂了许多。在我编写这个DEMO之前,