距离微信小程序内测版发布已经过去十天了，网上关于微信小程序的讨论异常火爆。从发布到现在，微信小程序一直占据着各大技术论坛的头条。当然，各个平台也对其产生了兴趣。微信小程序上有新闻报道。毕竟腾讯在国内的影响力还是很大的。我们都知道，微信小程序在第一天就发布了内测版本，并​​没有透露官方的开发文档和开发工具。但这并不能阻止技术人员先破解安装旧版本，然后用新版本覆盖安装过程的好奇心。 ，您可以体验微信小程序的魅力。当时为了少走点弯路，我写了一篇搭建微信小程序开发环境的文章。不过，文章发表的第二天，微信官方就发布了官方文档，并更新了开发工具，让你可以在无人陪伴的情况下体验小程序的开发。

因为我对小程序也很感兴趣，觉得是一件很有趣的事情，所以就用QQ来练习，做了一个模仿QQ的微信小程序。由于我是一名开发人员，所以很少接触一些前端的东西。我的水平有限，所以很多部分的代码并不规范。做的过程也是一个学习的过程，也是一个提高的过程。

这篇文章主要写的是我在这个项目进行过程中遇到的一些问题。如果阅读本文对您有所帮助，我将非常高兴并欢迎明星项目。

源码开发工具官方demo项目结构

文章一开始，我们简单介绍一下项目结构。如果您没有安装开发工具，可以前往：下载。微信小程序项目结构主要有四种文件类型，如下

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

根目录下名为app的这四种文件是程序入口文件。

了解了小程序的基本文件结构后，就可以开始研究官方demo了。研究过程中如果有什么不明白的地方，可以去官方文档寻求解答。如果找不到答案或者有疑问，可以在本博客留言，互相交流。以下是一些更有可能发生的问题。

常见问题解答 rpx ( )

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

在这里写下图片描述

我在这个项目中使用了rpx大小单位，在过程中遇到了一个很奇怪的问题。相邻的两条信息之间将直接存在一条分界线。我将线的高度设置为1rpx，但是如果没有单独的分割线，则不会显示，如下图。

在这里写下图片描述

我看到第一行和第二行没有直接显示这一行，但是其他的都显示了。分割线的属性是一样的，不同手机（分辨率不同）不显示分割线。也是不同的。在某些分辨率下，不显示多条分割线。不知道这是模拟器的bug还是rpx的bug。最后分割线的高度尺寸单位是px，就解决了这个问题。

错误

在这里写下图片描述

微信小程序刚出来的时候，如果输入这个信息，就说明还没有被破解。但现在官方软件更新可以选择“不开发”，如下图。如果我们选择“none”，这个错误就可以解决。建议安装官方开发工具。您可以在此处找到下载链接。

在这里写下图片描述

-4058 错误

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

在这里写下图片描述

我们看到上面的错误信息中有一个数字-4058。这应该是第一次进入微信小程序时最常遇到的错误。这通常是由于丢失文件引起的。它后面有一条路。您可以查看该路径以查看该文件是否存在。出现这个错误的原因一般是创建项目时选择的目录不正确，或者app.json中注册了一个不存在的页面。

当然，还有一种情况，app.json文件中注册的页面没有创建，或者你删除了页面但没有取消注册，也会导致-4058错误。

页面注册错误

在这里写下图片描述

这个错误可能很容易理解，页面注册错误。页面是通过Page 对象呈现的。每个页面对应的js文件都要创建一个页面。最简单的方法就是在js文件下写Page({})。页面渲染的生命周期是在页面中管理的，数据处理和事件都在这里完成。出现这个错误的原因通常是页面刚刚创建，js文件还没有处理或者被遗忘了。因此，在创建页面时一定要养成先在js文件中创建Page的习惯。

页面错误

在这里写下图片描述

它的字面意思是页面路由错误。微信中有两种路由方式。一种是使用wxml文件中的组件，另一种是调用wx.

以下代码：

wxml 文件：

搜索

js文件事件处理函数：

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

如果你这样写，恭喜你，你会看到上面提示的错误。这是由于重复调用该路由造成的。解决办法是删除路由、删除组件或者删除wx.除了上面提到的可能的路由错误之外，还有一种情况类似下面的代码

搜索

这也是不允许的，这意味着组件不能嵌套在组件内。它只能存在于单层中。

页面中不要有*。

在这里写下图片描述

大致意思是当前页面没有这个处理，我们确认一下是否定义过，同时也指出可能出现错误的位置 // 其实这种问题通常是在我们定义一些处理事件的时候出现的在wxml中，但是不在js文件中实现这个，在处理事件时就会出现这个错误。然后我们按照提示，在js文件中添加事件处理，如下所示。添加后就不会再出现这个错误信息了。

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

设置不显示

不显示的原因有很多。要查找此错误，请直接转到 app.json 文件。最常见的错误也是刚学习微信小程序时最容易犯的错误有以下几点。

注册页面会将页面写入app.json的字段中，如

"pages":[ "pages/message/message", "pages/contact/contact", "pages/dynamic/dynamic", "pages/dynamic/music/music", "pages/index/index", "pages/logs/logs" ]

显示问题

在这里写下图片描述

通过这张动态图你应该已经发现问题了。点击音乐进入音乐界面时，先显示音乐，后显示音乐。这种经历是绝对不能接受的。原因是音乐界面在js文件中页面的生命周期方法中。放。

如果不明白生命周期可以点击查看

Page({ data:{ // text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 //NavigationBarTitle如果此处和json文件都设置，最后展示此处的标题栏 wx.setNavigationBarTitle({ title: '音乐' }) }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } })

从注释中应该明白，方法中写的是设置标题，即页面已经渲染完毕，之前显示过json文件（覆盖关系，如果子页面上的json文件设置会覆盖app .json全局设置）的。也许你会说在函数中写wx.e，但是这样设置是错误的，因为执行后页面会被渲染。当页面渲染时，会从json文件中读取，导致设置只在页面渲染之前显示。 ，然后就会显示json文件的，所以现在你应该明白了，设置ttle最好的地方就是为子文件写一个json文件，并写入到该文件中。如果你想改变颜色，直接添加到文件中即可。文件中写入的属性值会覆盖app.json中设置的值。

{ "navigationBarTitleText": "音乐" }

wx.无法打开页面

一个应用程序只能同时打开5个页面。打开 5 个页面后，wx.无法正常打开新页面。请避免多级交互，或者使用wx.

无法通过css获取本地资源

-：可以使用网络图片，或者，或者使用标签

页面之间的数据传输

微信小程序路由（页面跳转）是通过API wx中的组件实现的。或 wxml。无论哪种实现都有一个重要的参数就是url，它指定要跳转的页面，页面之间的数据传输也是通过URL来实现的。这个数据传输有点类似于我们使用的get网络请求。参数拼接在要跳转的接口地址后面并用“？”连接。然后将要传递的数据以key和的形式追加在“?”后面，多个参数直接用“&”匹配。比如我们点击消息聊天记录，将列表上的数据转移到下一页，我们可以这样写。

{{item.title}} {{item.message}} {{item.time}} {{item.count}}

js文件的页面中接收数据。页面生命周期中有一个函数，它做了一些初始化数据的工作。函数有一个参数，我们可以通过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" }) }, })

这样就实现了页面之间的数据传输功能。

好了，今天就讲到这里。如果以后使用微信小程序遇到其他问题，我会添加到这篇文章中。如果您在开发过程中遇到一些坑并且已经解决了，可以在本文中评论，方便大家。 。感谢您的支持。