微信小程序开发常见问题有哪些
本文讲解《微信小程序开发常见问题有哪些》,希望能解决大家遇到的相关问题。一起来看看这篇文章《微信常见问题有哪些小程序开发》。
微信小程序常见问题:
一:项目结构
微信小程序项目结构主要有四种文件类型,如下
WXML(WeiXin Markup Language)是由框架设计的一套标记语言。结合基础组件和事件系统,可以构建页面的结构。内部主要是微信自己定义的一组组件。
WXSS(WeiXin Style Sheets)是一种用于描述WXML组件样式的样式语言。
js逻辑处理,网络请求
JSON小程序设置,例如页面注册、页面标题和tabBar。
注意:为了方便开发者减少配置项,规定描述页面的四个文件必须具有相同的路径和文件名。
根目录下以app命名的四种文件为程序入口文件。
应用程序.json
该文件必须可用。没有这个文件,项目无法运行,因为微信框架使用这个作为配置文件的入口,整个小程序的全局配置。包括页面注册、网络设置、小程序窗口背景颜色、配置导航栏样式、配置默认标题等。
应用程序.js
你必须有这个文件,否则你会得到一个错误!但是这个文件是创建的,不需要写任何东西
以后我们可以对小程序的生命周期函数进行监控和处理小程序开发设计,并在这个文件中声明全局变量。
应用程序.wxss
全局配置的样式文件,项目不需要。
如果你了解了小程序的基本文件结构,就可以开始研究官方demo了。如果在研究过程中有不明白的地方,可以去官方文档寻求解答。如果找不到答案或有疑问,可以在本博客留言交流。以下是一些更可能出现的问题。
二:常见问题
rpx(响应像素)
微信小程序定义了一个新的尺寸单位,可以适应不同分辨率的屏幕。它指定屏幕宽度为 750rpx。比如在 iPhone 6 上,屏幕宽度是 375px,总共有 750 个物理像素,那么 750rpx = 375px = 750 个物理像素,1rpx = 0.5px = 1 个物理像素。
这个项目我用的是rpx大小单位,期间遇到了一个很奇怪的问题。两个相邻的信息中直接会有一条分界线。我将线的高度设置为1rpx,但没有显示任何单独的分割线。
看到第一行和第二行没有真正的线,但是其他的都显示了,分割线的属性是一样的,不同手机(不同分辨率)不显示的分割线也不同. 某些分辨率不显示多条分割线。不知道这是模拟器的bug还是rpx的bug。最后,分割线的高度尺寸单位使用px 小程序分销系统开发 ,解决了这个问题。
40013 错误
微信小程序刚出来的时候,如果输入AppID提示这个信息,就说明没有破解,但是现在官方软件更新可以选择不用AppID开发,如下图我们可以选择no AppID 来解决这个错误。建议安装官方开发工具。下载链接可以在这里找到。
4058 错误
微信小程序在创建项目时不选择AppID。创建项目时会生成app.json。app.josn 是程序启动最重要的文件。程序的页面注册、窗口设置、选项卡设置和网络请求时间设置都在这个文件中。下。如果你创建的项目目录下没有app.json文件,会报如下错误。
我们看到上面的错误信息中有一个数字-4058。这应该是进入微信小程序时最常遇到的错误。这通常是一个丢失的文件。后面有路。您可以查看路径以查看此文件是否存在。出现这个错误的原因一般是创建项目选择的目录不正确,或者app.json中注册了一个不存在的页面。
当然也有app.json文件的pages中注册的页面没有创建的情况,或者你删除了一个页面,但是不取消注册也会出现-4058错误。
页面注册错误
这个错误可能很容易理解,页面注册错误。页面通过 Page 对象呈现。每个页面对应的js文件必须创建一个页面。最简单的方法就是在js文件下写Page({}),页面里面有管理页面渲染的生命周期,数据处理和事件都在这里完成。出现这个错误的原因一般是页面刚刚创建,js文件已经处理或者忘记处理了。因此,在创建页面的同时,要养成在js文件中先创建Page的习惯。
页面路径错误
字面意思是页面路由不正确。微信中有两种路由方式。一种是在 wxml 文件中使用它。
以下代码:
wxml 文件:
js 文件事件处理程序:
bindtap:function(event){ wx.navigateTo({ url: "search/search" }) }
如果你这样写,恭喜你,你会看到如上所示的错误,这是重复调用路由造成的。解决方案是删除一条路线并删除它。
搜索
这也是不允许的,也就是说
当前页面中没有 * 处理程序。
大概意思是当前页面没有这个处理,让我们判断一下是否已经定义,同时在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的列表中没有写pagePath字段,或者pagePath中的页面没有注册
tabBar的列表的pagePath指定的页面不先写在注册页面上。微信小程序的逻辑是“pages”中的第一个页面是首页,也就是程序启动后显示的第一个页面。如果tabBar列表的pagePath指定的页面不是页面的第一页,当然就不会TV tabBar了。
tabBar 的数量少于两项或多于五项。微信官方明确规定tabBars至少2项最多5项。Over 或 under 将不会显示 tabBar。
navigationBarTitle 显示问题
你应该通过这张动态图找到问题所在。点击音乐进入音乐界面 小程序商城定制开发 ,标题先显示WeChatForQQ,再显示音乐。这种体验绝对不能接受。原因是音乐界面的标题是js文件中页面的生命。在循环方法中设置。
不了解生命周期的可以点击查看
Page({ data:{ // text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 //NavigationBarTitle如果此处和json文件都设置,最后展示此处的标题栏 wx.setNavigationBarTitle({ title: '账户' }) }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } })
通过注释应该明白设置标题是写在onReady方法中的,即页面已经渲染完毕,onReady之前显示的标题就是json文件(覆盖关系,如果在子页面json文件中设置了标题,它将覆盖全局设置中的 app.json 标题)。你可能会说 wx.setNavigationBarTitle 是写在 onLoad 函数中的,但是如果这个设置不对,因为页面是在 onLoad 执行后渲染的小程序开发设计,所以在页面渲染的时候会从 json 文件中读取标题,导致标题onLoad 设置的只会在页面渲染前显示,然后显示json文件的tiles,所以现在应该明白设置ttle最好的地方就是为子文件写一个json文件,把它写在文件里,如果你想改变颜色,
{ "navigationBarTitleText": "账户" }
wx.navigateTo 无法打开页面
一个应用程序只能同时打开 5 个页面。当已经打开 5 个页面时,wx.navigateTo 无法正常打开新页面。请避免多级交互,或使用 wx.redirectTo
本地资源无法通过css获取
background-image:可以使用网络图片,或者base64,或者使用标签
页面之间的数据传输
微信小程序路由(页面跳转)是通过API wx.navigateTo或者wxml
{{item.title}} {{item.message}} {{item.time}} 0}}">{{item.count}}
数据接收在js文件的页面中接收。页面生命周期中有一个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 " }) }, })
关于“微信小程序开发的常见问题有哪些”介绍到这里。希望大家多多支持编程宝库。
下一篇:如何实现微信小程序登录功能的编程技术及程序设计
如何实现微信小程序的登录功能:本文讲解“如何实现微信小程序的登录功能”,希望能解决大家遇到的相关问题。我们来看看这篇文章《如何实现微信小程序的登录功能》。微信小程序登录一.小程序不支持cookie session1.通过验证3rd_…
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网