微信小程序 常见问题总结(4058,40013)及解决办法


Posted in Javascript onJanuary 11, 2017

微信小程序 常见问题:

一:项目结构

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

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文件使用

如下代码:

wxml文件:

js文件事件处理函数:

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

如果你这样写的话,恭喜你,你就会看到上面提示的错误,这是因为重复调用路由引起的,处理方法就是删除一个路由,删除

<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文件加上事件处理,如下代码,加上后就不会再有此错误提示。

bind:function(event){
  wx.navigateTo({
   url: "
pages/logs/logs
"
  })
 },

tabBar设置不显示

对于tabBar不显示,原因有很多,查找这个错误直接去app.json这个文件,最常见的也是刚学习微信小程序最容易犯的错误无外乎下面几种

注册页面即将页面写到app.json的pages字段中,如

"pages":[
  "pages/index/index",
  "pages/logs/logs",
  "pages/account/account",
  "pages/more/more"
 ],

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中

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

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(){
  // 页面关闭
 },
 bind:function(event){
wx.navigateTo({
 url: "
pages/logs/logs
"
})
 },
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
一句话JavaScript表单验证代码
Aug 02 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
javascript实现Table排序的方法
May 15 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 #Javascript
AngularJS中的缓存使用
Jan 11 #Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 #Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 #Javascript
JavaScript实现大图轮播效果
Jan 11 #Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 #Javascript
canvas 弹幕效果(实例分享)
Jan 11 #Javascript
You might like
PHP中设置时区方法小结
2012/06/03 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
运用js实现图层拖拽的功能
2019/05/24 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
Python对列表排序的方法实例分析
2015/05/16 Python
3分钟学会一个Python小技巧
2018/11/23 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
如何通过python检查文件是否被占用
2020/12/18 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
一道SQL存储过程面试题
2016/10/07 面试题
工程班组长岗位职责
2013/12/30 职场文书
采购部经理岗位职责
2014/02/10 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
企业法人代表证明书
2014/09/27 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
2014年度培训工作总结
2014/11/27 职场文书