关于高仿QQ的微信小程序的详解

关于高仿QQ的微信小程序的详解
这篇文章主要写我在SmallAppForQQ这个项目进展的过程中遇到的一些问题。希望阅读此文对你有一定帮助。

这篇文章主要写我在smallappforqq这个项目进展的过程中遇到的一些问题。希望阅读此文对你有一定帮助。

SmallAppForQQ：一个访QQ的微信小程序

文章开头，先简单介绍下项目结构，若没有安装开发工具，可去

github.com/xiehui999/SmallAppForQQ

下载。微信小程序项目结构主要有四个文件类型，如下——

1）WXML文件：（Weixin Markup Language）是微信在前人基础之上设计的一套描述式标签语言，用于构建小程序的视图。

2）WXSS文件：(WeiXin Style Sheets)是一套样式语言，用于描wxml中视图组件的样式，

3）js文件：业务逻辑处理，与后端进行数据交互等

4）json文件：小程序设置文件，如页面注册，页面标题等。

注意：为了方便开发者减少配置项，规定描述页面的这四个文件必须具有相同的路径与文件名。

app.json

这个文件，在根目录下，是程序入口文件。

必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色等。

app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写

以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.wxss

全局配置的样式文件，项目非必须。

知道小程序基本文件结构，就可以开始研究官方demo了，研究过程中如果有不明白的地方可以去官方文档寻求答案。下面介绍下出现概率较高的几个问题——

常见问题rpx（responsive pixel）

微信小程序新定义了一个尺寸单位，可以适配不同分辨率的屏幕，它规定屏幕宽为750rpx，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

（rpx并不是微信新定义的尺寸单位，在之前移动开发中便有，微信是兼收了众家之长，在前人基础之上定义了一个小程序开发框架。和苹果一样，苹果在开放AppStore时使用Objective-C作为App的开发语言，但是OC并不是苹果发明的。）

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

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

40013错误

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

（目前个人开发者也能申请小程序，appId不再稀缺，无此麻烦）

-4058错误（缺少app.json文件）

微信小程序创建项目时选择无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(e){wx.navigateTo({url:"search/search"})}