小程序开发有哪些坑

微信公开课小程序热门讨论「小程序开发有哪些坑」最新回复-小程序开发有一下两种典型的“坑”一键生成的模板小程序，后期无法二次开发，到时业务受阻或需要重新开发小程序选择价格过低的开发公司，不提供售后服务，售后无门希望对大家有帮助！
1.JSON配置文件小程序中，包含唯一的全局配置文件app.json，以及每个页面的配置文件page.json。每单页页面相应的JSON文件会覆盖与app.json相同的配置项。如下，是一个包含了所有配置选项的简单配置app.json。pages:[//设置页面的路径pages/index/index,//不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合pages/logs/logs],window:{//设置默认窗口的表现形式navigationBarBackgroundColor:#ffffff,//顶部导航栏背景色navigationBarTextStyle:black,//顶部导航文字的颜色black/whitenavigationBarTitleText:微信接口功能演示,//顶部导航的显示文字backgroundColor:#eeeeee,//窗口的背景色backgroundTextStyle:light,//下拉背景字体、loading图的样式，仅支持dark/lightenablePullDownRefresh:false，//是否支持下拉刷新，不支持的话就直接不写！disableScroll:true,//设置true不能上下滚动，true/false，注意！只能在page.json中有效，无法在app.json中设置该项。},tabBar:{//底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个list:[{//设置tab的属性，最少2个，最多5个pagePath:pages/index/index,//点击底部tab跳转的路径text:首页,//tab按钮上的文字iconPath:../img/a.png,//tab图片的路径selectedIconPath:../img/a.png//tab在当前页，也就是选中状态的路径},{ pagePath:pages/logs/logs, text:日志}],color:red,//tab的字体颜色selectedColor:#673ab7,//当前页tab的颜色，也就是选中页的backgroundColor:#2196f3,//tab的背景色borderStyle:white,//边框的颜色black/whiteposition:bottom//tab处于窗口的位置top/bottom},networkTimeout:{//默认都是60000秒一分钟request:10000,//请求网络超时时间10000秒downloadFile:10000，//链接服务器超时时间10000秒uploadFile:10000,//上传图片10000秒downloadFile:10000//下载图片超时时间10000秒},debug:true//项目上线后，建议关闭此项，或者不写此项2.JS逻辑层小程序的逻辑层由JavaScript语言完成。但因为小程序不在浏览器中运行，所以JS在web浏览器中的一些函数不能用，如document、window等。app.js有全局的小程序生命周期，page.js有自己本页面的生命周期。2.1注册小程序app.js这一步骤，有这几个需要注意的地方：必须在app.js中，使用app()函数注册微信小程序。全局小程序中，只能注册一次；不能在app()内的函数中调用getApp()（小程序实例），使用this就可以拿到小程序的实例；不要在onLaunch的时候getCurrentPage()，因为此时page还没有生成；通过其他子页面调用getApp()获取实例后，不要私自调用小程序全局的生命周期方法；可以通过varapp=getApp()获取小程序的实例。app({//小程序生命周期的各个阶段onLaunch:function(){},//当小程序初始化完成时，会触发onLaunch（全局只触发一次）onShow:function(){},//当小程序启动，或从后台进入前台显示，会触发onShowonHide:function(){},//当小程序从前台进入后台隐藏，会触发onHideonError:function(){},//当小程序发生脚本错误，或者api调用失败时，会触发onError并带上错误信息//自定义函数或者属性，用this可以访问...})2.2注册小程序的页面page.jsPage()用来注册一个页面，维护该页面的生命周期以及数据。Page({data:{//页面的初始数据//调用：{{text}}{{array[0].msg}}text:initdata, array:[{  msg:1},{  msg:2}]},//页面生命周期的各个阶段onLoad:function(){},//生命周期函数--监听页面加载onShow:function(){},//生命周期函数--监听页面初次渲染完成onReady:function(){},//生命周期函数--监听页面显示onHide:function(){},//生命周期函数--监听页面隐藏onUnload:function(){},//生命周期函数--监听页面卸载onPullDownRefresh:function(){},//页面相关事件处理函数。如果需要监听用户下拉动作，需要在app.json中配置enablePullDownRefresh:true允许上拉刷新onReachBottom:function(){},//页面上拉触底事件的处理函数onShareAppMessage:function(){//用户点击右上角分享return{  title:自定义分享标题,  desc:自定义分享描述,  path:/page/user?id=123}},//自定义函数或者属性如：customData:{ hi:MINA}...})2.3公共模块util.js公共模块方法需要通过module.exports对外暴露接口，使用的时候需要利用require(path)，将文件引入。如：functionsayHello(name){//公共方法util类console.log(`Hello${name}!`)}module.exports.sayHello=sayHello//用module.exports对外暴露接口//先引入文件，是新建的一个utils包，公共方法在util.js里面varutil=require(../../utils/util.js)Page({//调用类onLoad:function(){//使用时，用util引用名调用，如：util.sayHello()util.sayHello(我是传的值);}})2.4数据操作setData()不能直接操作数据，例如this.data.text=xxxxx就是错误的。你需要在this.setData()之中，进行数据的操作。同时，这里有作用域的问题。比如，需要在局部函数中使用，就需要.bind(this)。如果你需要操作全局的数据，你需要在app.js中进行相应设置，例如：App({//app.jsglobalData:1})//某page.jsconsole.log(getApp().globalData)3.视图层WXML视图层的数据绑定均来自于Page中的data，想要修改相应值，你需要用到this.setData。数据绑定使用两对花括号，将变量名包起来。3.1条件渲染你可以利用if和else，在视图层上编写在特定情况下，出现的不同的视图结果。viewwx:if={{zhenjiaa==123}}123334/viewviewwx:if={{zhanjia}}123334/viewviewwx:if={{len5}}大于5我就显示了/viewviewwx:if={{length5}}1/viewviewwx:elif={{length2}}2/viewviewwx:else3/viewblockwx:if={{true}}viewview1/viewviewview2/view/block很多人会将CSS中的display:hidden属性，将其做一个比较。微信小程序中的wx:if是惰性的。如果不符合渲染条件，它不会渲染相应部分；使用display:hidden时，元素始终渲染，只是视图层上没有显示，用户看不见。如果你的小程序有元素显示频繁切换的需求，建议你使用display:hidden，能够为用户提供能顺畅的使用体验。3.2列表渲染相当于让WXML处理一个循环。在WXML中，你可以这样来建立一个for循环：viewwx:for={{array}}{{index}}:{{item}}/view然后在相应的JS中，新建一个数组：page.jsPage({data:{array:[1,2,3,4,5]}})需要注意的是，如果列表中的项需要动态添加到列表中，并希望项目保持原有的特征和状态，那么你应该使用wx:key。wx:key有两种形式：字符串：wx:key=unique保留关键字：wx:key=*this3.3运算WXML可以执行简单的运算任务。例如：view{{a+b}}+{{c}}+d/view也可以做到字符串拼接：view{{hello+name}}/view甚至，你可以使用...在WXML中展开对象。3.4模板name定义组件模版的名称，引用模版的时候使用is属性指定模版的名字，is可以进行简单的三目运算，需要传入模版需要的data数据。因为模版拥有自己的作用域，所以只能使用data传入数据，而不接受双花括号的写法。templatename=msgItemviewtext{{index}}:{{msg}}/texttextTime:{{time}}/text/view/template!--其他代码--templateis=msgItemdata={{...item}}/3.5公共模块的引用WXML提供import和include两种文件引用方式。import有作用域的概念，不能多重引用。!--B.wxml--importsrc=a.wxml/!--A.wxml--templatename=AtextAtemplate/text/template而include就可以多重引用了。!--引用header、其中header.wxml中也引用了footer.wxml--includesrc=header.wxml/viewbody/view!--header.wxml--viewheader/viewincludesrc=footer.wxml/3.6事件名称以bind开头的事件不阻止冒泡，名称以catch开头的事件冒泡是阻止的。如bindTap和catchTab。在WXML中，可以使用dataset定义data中的数据，会通过事件传递。它的事件以data-开头，多个单词以-链接，如data-a-b。需要注意的是，使用这种方式定义的变量不能有大写。它会自动转成驼峰命名，调取的时候去驼峰命名的名字。4.WXSSWXSS的用法类似于CSS，并在CSS的基础上，扩展了rpx尺寸单位和样式导入功能。WXSS可以使用内联样式，但这样会影响渲染速度。每个页面自己的page.wxss样式表，会覆盖全局样式表app.wxss。 更多有关「小程序开发有哪些坑」的疑问请扫码关注微信公开课+小程序！