2017年昆明小程序开发公司哪家好？-移动互联建站资讯-云南网站建设专家开发 | 小程序开发有哪些坑？这份笔记都整理出来了
知晓程序注：
即使你认为小程序开发很简单，也无法否认小程序开发中，仍然有许多需要注意的地方。稍不注意，就会产生意料之外的问题。
知晓程序（微信号 zxcx0101）今天推荐的这篇文章，是作者通过亲身开发，列出的小程序开发领域问题，并在文章给出了解决方案。希望能够帮助开发小程序的你，避开这些坑。
文 | 泡芙小姐 110
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/white
"navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
"enablePullDownRefresh": "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/white
"position": "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() 获取实例后，不要私自调用小程序全局的生命周期方法；
可以通过 var app=getApp() 获取小程序的实例。
// 小程序生命周期的各个阶段
onLaunch: function(){},//当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow: function(){},//当小程序启动，或从后台进入前台显示，会触发 onShow
onHide: function(){},//当小程序从前台进入后台隐藏，会触发 onHide
onError: function(){},//当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
// 自定义函数或者属性，用 this可以访问
2.2 注册小程序的页面 page.js
Page() 用来注册一个页面，维护该页面的生命周期以及数据。
data: { //页面的初始数据//调用：{{text}} {{array[0].msg}}
text: 'init data',
// 页面生命周期的各个阶段
onLoad: function () {}, //生命周期函数--监听页面加载
onShow: function () {}, //生命周期函数--监听页面初次渲染完成
onReady: function () {}, //生命周期函数--监听页面显示
onHide: function () {}, //生命周期函数--监听页面隐藏
onUnload: function () {}, //生命周期函数--监听页面卸载
onPullDownRefresh: function () {}, //页面相关事件处理函数。如果需要监听用户下拉动作，需要 在app.json中配置
"enablePullDownRefresh":"true" 允许上拉刷新
onReachBottom: function () {}, //页面上拉触底事件的处理函数
onShareAppMessage: function () { //用户点击右上角分享
title: '自定义分享标题',
desc: '自定义分享描述',
path: '/page/user?id=123'
// 自定义函数或者属性如：
customData: {
hi: 'MINA'
2.3 公共模块 util.js
公共模块方法需要通过 module.exports 对外暴露接口，使用的时候需要利用 require(path)，将文件引入。如：
function sayHello(name) {//公共方法util类
console.log(`Hello ${name} !`)
module.exports.sayHello = sayHello//用module.exports 对外暴露接口
//先引入文件，是新建的一个 utils 包，公共方法在 util.js 里面
var util = 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.js
globalData: 1
// 某 page.js
console.log(getApp().globalData)
3. 视图层 WXML
视图层的数据绑定均来自于 Page 中的 data，想要修改相应值，你需要用到 this.setData。数据绑定使用两对花括号，将变量名包起来。
3.1 条件渲染
你可以利用 if 和 else，在视图层上编写在特定情况下，出现的不同的视图结果。
&view wx:if="{{zhenjiaa=='123'}}"&123334&/view&
&view wx:if="{{zhanjia}}"&123334&/view&
&view wx:if="{{len & 5}}"&大于5我就显示了 &/view&
&view wx:if="{{length & 5}}"& 1 &/view&
&view wx:elif="{{length & 2}}"& 2 &/view&
&view wx:else& 3 &/view&
&block wx:if="{{true}}"&
&view& view1 &/view&
&view& view2 &/view&
很多人会将 CSS 中的 display: hidden 属性，将其做一个比较。
微信小程序中的 wx:if 是惰性的。如果不符合渲染条件，它不会渲染相应部分；
使用 display: hidden 时，元素始终渲染，只是视图层上没有显示，用户看不见。
如果你的小程序有元素显示频繁切换的需求，建议你使用 display: hidden，能够为用户提供能顺畅的使用体验。
3.2 列表渲染
相当于让 WXML 处理一个循环。
在 WXML 中，你可以这样来建立一个 for 循环：
&view wx:for="{{array}}"& {{index}}:{{item}} &/view&
然后在相应的 JS 中，新建一个数组：
page.jsPage({
array: [1, 2, 3, 4, 5]
需要注意的是，如果列表中的项需要动态添加到列表中，并希望项目保持原有的特征和状态，那么你应该使用 wx:key。
wx:key 有两种形式：
字符串：wx:key="unique"
保留关键字：wx:key="*this"
WXML 可以执行简单的运算任务。例如：
&view& {{a + b}} + {{c}} + d &/view&
也可以做到字符串拼接：
&view&{{"hello" + name}}&/view&
甚至，你可以使用 ... 在 WXML 中展开对象。
name 定义组件模版的名称，引用模版的时候使用 is 属性指定模版的名字，is 可以进行简单的三目运算，需要传入模版需要的 data 数据。
因为模版拥有自己的作用域，所以只能使用 data 传入数据，而不接受双花括号的写法。
&template name="msgItem"&
&text& {{index}}: {{msg}} &/text&
&text& Time: {{time}} &/text&
&/template&
&!-- 其他代码 --&
&template is="msgItem" data="{{...item}}"/&
3.5 公共模块的引用
WXML 提供 import 和 include 两种文件引用方式。
import 有作用域的概念，不能多重引用。
&!-- B.wxml --&
&import src="a.wxml"/&
&!-- A.wxml --&
&template name="A"&
&text& A template &/text&
&/template&
而 include 就可以多重引用了。
&!--引用 header、其中 header.wxml 中也引用了 footer.wxml--&
&include src="header.wxml"/&
&view& body &/view&
&!-- header.wxml --&
&view& header &/view&
&include src="footer.wxml"/&
名称以 bind 开头的事件不阻止冒泡，名称以 catch 开头的事件冒泡是阻止的。如 bindTap 和 catchTab。
在 WXML 中，可以使用 dataset 定义 data 中的数据，会通过事件传递。它的事件以 data- 开头，多个单词以 - 链接，如 data-a-b。
需要注意的是，使用这种方式定义的变量不能有大写。它会自动转成驼峰命名，调取的时候去驼峰命名的名字。
WXSS 的用法类似于 CSS，并在 CSS 的基础上，扩展了 rpx 尺寸单位和样式导入功能。
WXSS 可以使用内联样式，但这样会影响渲染速度。
每个页面自己的 page.wxss 样式表，会覆盖全局样式表 app.wxss。
原文地址：/p/f8f85757e90d
往期精选文章
本文由知晓程序授权转载，关注微信号 zxcx0101，可获得以下内容和服务：
在微信后台回复「1228」，获取全网首本《微信小程序入门指南》。
在微信后台回复「加群」，加入「一起发现小程序」微信交流群。
在微信后台回复任意关键词，还能获得相关小程序推荐，赶紧试试吧！
有好的产品或者项目希望我们报道，猛戳这里
150文章总数
全新爱范儿 App 现已适配
Android 及 iPhone
使用微信扫码关注爱范儿微信公众号
关注爱范儿微信号，连接热爱，关注这个时代最好的产品。
想让你的手机好用到哭？关注这个号就够了。
关注玩物志微信号，就是让你乱花钱。更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
按住视频可进行拖动
&正在加载...
收藏成功，可进入
查看所有收藏列表
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
用爱奇艺APP或微信扫一扫，在手机上继续观看
当前播放时间：
一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
微信小程序开发公司那么多，哪家最靠谱呢？
正在检测客户端...
您尚未安装客户端，正在为您下载...安装完成后点击按钮即可下载
， 可在设置中重新打开噢！
30秒后自动关闭
微信小程序开发公司那么多，哪家最靠谱呢？">微信小程序开发公司那么多，哪家最靠谱呢？
请选择打赏金额：
播放量12.7万
播放量数据：快去看看谁在和你一起看视频吧~
更多数据：
Copyright (C) 2017
All Rights Reserved
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
正在为您下载爱奇艺客户端安装后即可快速下载海量视频
正在为您下载爱奇艺客户端安装后即可免费观看1080P视频
&li data-elem="tabtitle" data-seq="{{seq}}"& &a href="javascript:void(0);"& &span>{{start}}-{{end}}&/span& &/a& &/li&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"& &a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制专业的小程序开发公司推荐_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
专业的小程序开发公司推荐
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢