转载http://blog.poetries.top/2018/08/09/xiaochengxu-note/
须知
App() 必须在 app.js 中注册,且不能注册多个。编译后的代码包大小需小于 1MB,否则代码包将上传失败。每个页面需要手动在app.json中进行注册,否则不能访问。app.json中pages数组的第一项代表小程序的初始页面,小程序中新增/减少页面,都需要对 pages 数组进行修改。直接修改 this.data无效,无法改变页面的状态,还会造成数据不一致。单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。不要尝试修改页面栈,会导致路由以及页面状态错误。tabBar只能配置最少2个、最多5个,tab 按数组的顺序排序。小程序页面只能同时打开 5 个,如果交互流程较长难以支持。同时只能存在 5 个url请求。无法跳转小程序以外的url。没有cookie。没有开放加载web页面没有a标签链接,不可嵌套iframe没有window变量,但微信提供了wx全局方法集事件绑定和条件渲染类似Angular,全部写在WXML中由app.js、app.json、app.wxss三个文件组成,放在根目录
app.js 根目录的app.js很有用,因为在它内部注册的变量或方法,都是可以被所有页面获取到。可以监听并处理小程序的生命周期、声明全局变量。其余的.js文 件可以通过var app = getApp() 获取其实例,调用其中定义的方法和变量,但不可以调用生命周期的方法app.json是小程序的全局配置 1 2 3 pages 配置小程序的组成页面,第一个代表小程序的初始页面 window 设置小程序的状态栏、标题栏、导航条、窗口背景颜色 tabBar 配置小程序tab栏的样式和对应的页面 app.wxss 是小程序的公共样式表,可以在其他.wxss文件中直接使用app.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 "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 //项目上线后,建议关闭此项,或者不写此项pages文件夹里是小程序的各个页面,每个界面一般都由.wxml、.wxss、.js、.json四个文件组成,四个文件必须是相同的名字和路径
.js 是页面的脚本代码,通过Page()函数注册页面。可以指定页面的初始数据、生命周期、事件处理等.wxml 是页面的布局文件,只能使用微信定义的组件.wxss 是样式表,需要注意 尺寸单位:rpx 可以根据屏幕的宽带进行自适应样式导入:@import导入外联样式表,如:@import "test.wxss";定义在app.wxss中的全局样式,作用于每个页面。定义在page的.wxss文件只作用于对应的页面,会覆盖app.wxss中相同的选择器.json 是页面的配置文件,只能设置app.json中的window配置内容,会覆盖app.json中window的相同配置项,即使不配置任何东西也需要写{},否则会报错utils 里面包含一些公共的代码抽取的js文件,作为模块方便使用。模块通过module.exports对外暴露接口
其他地方使用是var utils = require('../../utils/util.js') 进行引用传统的视图和数据绑定
那么微信小程序是通过什么方法来管理视图和对象绑定的呢,状态模式-单向数据流
数据流向是单向的,即视图变化不会影响对象状态
用户触发事件不仅要考虑当前UI元素更新,还会通过当前元素更新其他视图。所以视图上的数据都必须用过事件传递给对象,只有用户操作视图,才能获取到数据,并更新对象状态.wxml 中的动态数据都来自Page中的data。数据绑定使用数据绑定使用双大括号将变量包起来,可以作用于内容、组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)
1 2 3 4 5 6 7 Page({ data: { message: "Hello", id:0, status: true } }) 1 2 3 4 <view> {{message}} </view> <view id="item-{{id}}"> </view> <view wx:if="{{status}}"> </view> <view hidden="{{status}}"> </checkbox>还可以进行简单的运算在大括号里
1 2 3 4 <view hidden="{{status ? true : false}}"> Hidden </view> <view> {{a + b}} + c </view> <view wx:if="{{num > 6}}"> </view> <view>{{"hello" + word}}</view>用 wx:if=””来判断是否渲染代码块
1 <view wx:if="{{status}}"> isShow </view>还可以添加else块
1 2 3 <view wx:if="{{num > 5}}"> A </view> <view wx:elif="{{num > 2}}"> B </view> <view wx:else> C </view>使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名
1 2 3 <view wx:for="{{array}}" wx:for-index="num" wx:for-item="itemName"> {{num}}: {{itemName}} </view>include 就可以多重引用
1 2 3 4 5 6 7 <!--引用 header、其中 header.wxml 中也引用了 footer.wxml--> <include src="header.wxml"/> <view> body </view> <!-- header.wxml --> <view> header </view> <include src="footer.wxml"/>前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //app.js App({ onLaunch: function() { //小程序初始化(全局只触发一次) }, onShow: function() { //小程序显示 }, onHide: function() { //小程序隐藏 }, onError: function(msg) { //小程序错误 }, }) //其他 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问每个页面也有自己的生命周期
小程序注册完成后,加载页面,触发onLoad方法。页面载入后触发onShow方法,显示页面。首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。当小程序后台运行或跳转到其他页面时,触发onHide方法。当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //index.js Page({ onLoad: function(options) { //页面加载-----(一个页面只会调用一次) }, onReady: function() { //页面渲染-----(一个页面只会调用一次) }, onShow: function() { //页面显示-----(每次打开页面都会调用一次) }, onHide: function() { //页面隐藏-----(当navigateTo或底部tab切换时调用) }, onUnload: function() { //页面卸载-----(当redirectTo或navigateBack的时候调用) }, }) //其他 开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问当该组件添加redirect属性时,等同于wx.redirectTo接口;默认redirect属性为false,等同于wx.navigateTo接口
用户点击左上角返回按钮,或调用wx.navigateBack接口返回上一页
1 2 3 wx.navigateBack({ delta: 1 })delta为1时表示返回上一页,为2时表示上上一页,以此类推;如果dalta大于已打开的页面总数,则返回到首页。返回后,元界面会销毁
传递的参数没有被URIEncode,传递中文没有乱码
官方规定小程序最多只能有五个页面同时存在,意思是在不关闭页面的情况,最多新开五个页面,页面深度为5
对于可逆操作,使用wx.navigateTo,比如从首页跳转到二级页面,从二级页面返回是不需要重新渲染首页对于不可逆操作,使用wx.redirectTo,比如用户登录成功后,关闭登录页面,不能返回到登录界面。对于一些介绍性等不常用页面wx.redirectTo或wx.navigatrBack不要在首页使用wx.redirectTo,这样会导致应用无法返回首页使用wx.navigateTo每新开一个页面,页面栈大小加1,直到页面栈大小为5为止
使用wx.navigateTo重复打开界面
假如使用wx.navigateTo从四级页面跳转到二级页面,此时会在页面栈顶添加一个与二级页面初始状态一样的界面,但两个页面状态是独立的。页面栈大小会加1,如果页面栈大小为5,则wx.navigateTo无效
使用wx.redirectTo重定向
假如使用wx.redirectTo从四级页面重定向到二级页面,此时会将关闭四级页面,并使用二级页面替换四级页面,但两个页面状态是独立的。此时的页面栈大小不变,请注意和使用wx.navigateTo的区别
使用wx.navigateBack返回
总结
wx.navigateTo会增加页面栈大小,直到页面栈大小为5wx.redirectTo不会增加页面栈大小wx.navigateBack会减少页面栈大小,直到页面栈大小为16.2.1 小程序传递参数的方式
1、通过在App.js中设置全局变量
通常把不会更改的数据放在app.js的Data中,在各个页面中都可以通过APP实例获取Data数据
1 2 var app = getApp(); var data = app.data;2、通过拼接URL直接传递
wx.navigateTo({})中URL携带参数
1 2 3 wx.navigateTo({ url: 'test?id=1' });在wxml中使用navigator跳转url传递参数
代码如下,将要传递到另一个页面的字符串testId的值赋值到url中
1 <navigator class="test-item" url="../../pages/test/test?testId={{testData.testId}}"></navigator>在js页面中onLoad方法中接收
1 2 3 4 5 6 Page({ onLoad: function(options) { var testId = options.testId console.log(testId) } })navigator跳转url传递数组
如果一个页面要将一个数组,如相册列表传递到另一个页面
1 <navigator class="test-item" url="../../pages/test/test?albumList={{testData.albumList}}"></navigator>传递到js后从options中得到的是个字符串,每个图片的url通过’,’分隔,所以此时还需要对其进行处理,重新组装为数组
1 2 3 4 5 6 7 8 9 10 11 12 13 Page({ data: { // 相册列表数据 albumList: [], }, onLoad: function (options) { var that = this; that.setData({ albumList: options.albumList.split(",") }); } })3、在wxml中绑定事件后,通过data-hi="参数"的方式传递
这种方式一般是在wxml中绑定事件,同时设置需要传递的数据,如果需要传递多个,可以写多个data-[参数]的方式进行传递
1 2 3 <view bindtap="clickMe" data-testId={{testId}}"> ... </view>在js页面中自定义方法clickMe中接收
1 2 3 4 5 6 7 8 Page({ clickMe: function(event) { var testId = event.currentTarget.dataset.testid; wx.navigateTo({ url: '../../pages/test/test' }) } })wxml中配置data-albumlist传递数组
1 2 3 <view bindtap="clickMe" data-albumlist={{testData.albumList}}"> </view> 1 2 3 4 5 6 7 8 9 10 在js页面中自定义方法clickMe中接收 Page({ clickMe: function(event) { var albumList = event.currentTarget.dataset.albumlist.split(","); wx.navigateTo({ url: '../../pages/test/test' }) } })4、通过数据缓存存储再获取
wx.setStorageSync(KEY,DATA)存储数据
1 2 3 4 try { wx.setStorageSync('key', 'value') } catch (e) { }wx.getStorageSync(KEY)获取数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 try { var value = wx.getStorageSync('key') if (value) { // Do something with return value } } catch (e) { // Do something when catch error } 或 wx.getStorage({ key: 'key', success: function(res) { console.log(res.data) } })为什么脚本内不能使用window等对象
页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件为什么 zepto/jquery 无法使用
zepto/jquery 会使用到window对象和document对象,所以无法使用wx.navigateTo无法打开页面
一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面。请避免多层级的交互方式,或者使用wx.redirectTo样式表不支持级联选择器
WXSS支持以.开始的类选择器本地资源无法通过 css 获取
background-image:可以使用网络图片,或者 base64,或者使用<image/>标签如何修改窗口的背景色
使用 page 标签选择器,可以修改顶层节点的样式 1 2 3 4 5 page { display: block; min-height: 100%; background-color: red; }为什么上传不成功
为了提升体验流畅度,编译后的代码包大小需小于 1MB ,大于 1MB 的代码包将上传失败HTTPS 请求不成功
tls 仅支持 1.2 及以上版本微信小程序支持fetch或者promise吗?
promise工具目前不支持,fetch 客户端不支持 工具下个版本保持统一wx.request的POST方法的参数传输服务器接收不到的bug
wx.request post 的 content-type 默认为 ‘application/json '如果服务器没有用到 json 解释的话,可以把 content-type 设置回 urlencoded 1 2 3 4 5 6 7 8 wx.request({ .... method: "POST", header: { "content-type": "application/x-www-form-urlencoded" }, ... })wx.uploadFile在手机上返回http码403
安卓的微信升级到6.5.2及其以上版本小程序SVG支持吗?
image的src放远程svg可以,background-image里也可以ipad不能使用小程序?
暂时不支持ipad打开小程序请问小程序页内支持长按保存图片或分享图片吗?
目前没有这个功能微信小程序不支持cookie
使用Reids存储session有些手机不支持Object.assign方法,如果使用了该方法会出现莫名其妙的报错(并不会提示Object.assign is not function,而是导致调用了Object.assign方法的方法不能被调用)!
直接写一个合并对象的方法
1 2 3 4 5 6 function assignObject(o, n) { for (var p in n) { if (n.hasOwnProperty(p) && (!o.hasOwnProperty(p))) o[p] = n[p]; } }