導航跳轉javascript
wx.navigateTo
保留當前頁面，跳轉到應用內的某個頁面，不能跳轉到 tabBar 頁面，使用wx.navigateBack能夠返回到原頁面。
wx.redirectTo
關閉當前頁面，跳轉到應用內的某個頁面。
wx.reLaunch
關閉全部頁面，打開到應用內的某個頁面。
wx.switchTab
跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面css
點擊跳轉java
<text data-id='9' bindtap="gotolist">點擊跳轉</text> gotolist:function(e){ var id = e.currentTarget.dataset.id wx.navigateTo({ url: 'list?id=' + id }) }
接收參數web
onLoad: function (options) { var that = this if (options.id){ that.setData({ id: options.id, }) }}
get/post 請求json
wx.request({ url:"", data:{ session:wx.getStorageSync('session') }, success: function (res) { console.log(res.data) } })
多維數組小程序
data: { list:{ listid:'', listimg: '' } } that.setData({ "list[0].listid": options.id, "list[0].listimg": options.img })
模板
<template name="listimg">
<view><image src='{{listimg}}' /></view>
</template>微信小程序
引入模板
<import src="../../template/list.wxml"/>
<template is="listimg" data="{{...list[0]}}"/>api
模板裏判斷變量
<view wx:if="{{ischange > 0}}">爲真</view><view wx:else>爲假</view>數組
循環列表
<view wx:for="{{listcont}}" wx:key="listcont">
<image src='{{item.litpic}}' />
<view>{{item.date}}</view>
</view>微信
嵌套循環
<text wx:for="{{array}}" wx:for-index="key" wx:for-item="value">
{{key}}--{{value}}
</text>
配置參數 config.js
var DOMAIN = "www.domain.com"; var WEBSITENAME = "網站名稱"; var INDEXNAV = [{id:"1",name:"參數1"},{id:"2",name:"參數2"}] export default { getDomain: DOMAIN, getWebsiteName: WEBSITENAME, getIndexNav: INDEXNAV }
引入參數文件 並配置公共函數 api.js
import config from 'config.js' var domain = config.getDomain; var website = config.getWebsiteName; var indexnav = config.getIndexNav; module.exports = { getname:function(obj){ return website; }, getindexnav:function(obj){ return indexnav; } }
引入公共函數
var Api = require('../../utils/api.js')
Api.getname()
var app = getApp()//先實例化應用
app.commonFunction()//子頁面中調用公共app.js的commonFunction方法
提交表單
formSubmit:function(e){ for (var key in e.detail.value){ if(!e.detail.value[key]){ return false; } } wx.showToast({ title: '提交成功', icon: 'success', duration: 2000, mask: true }) }
關於that和this用法
微信小程序中，在wx.request({});方法調用成功或者失敗以後，有時候會須要獲取頁面初始化數據data的狀況，這個時候，若是使用，this.data來獲取，會出現獲取不到的狀況，調試頁面也會報undefiend。緣由是，在javascript中，this表明着當前對象，會隨着程序的執行過程當中的上下文改變，在wx.request({});方法的回調函數中，對象已經發生改變，因此已經不是wx.request({});方法對象了，data屬性也不存在了。官方的解決辦法是，複製一份當前的對象，以下：
var that=this;//把this對象複製到臨時變量that
在success回調函數中使用that.data就能獲取到數據了。
不過，還有另一種方式，也很特別，是將success回調函數換一種聲明方式，以下：
success: res =>{ this.setData({ loadingHidden: true, hideCommitSuccessToast: false }) }
在這種方式下，this能夠直接使用，徹底能夠獲取到data數據。
page的生命週期方法
onLoad 是生命週期函數,用來監聽頁面加載,一個頁面只會調用一次,只有onload中有options參數，能夠獲取頁面傳值等等
onReady 是生命週期函數,用來監聽頁面初次渲染完成,一個頁面只會調用一次,表明頁面已經準備穩當,能夠和視圖層進行交互.對頁面的設置請在onReady以後設置,如wx.setNavigationBarTitle.
onShow 生命週期函數,用來監聽頁面顯示,每次頁面打開都會調用一次.
onHide 生命週期函數,監聽頁面隱藏,當wx.navigateTo或者底部tab切換以後調用
onUpload 生命週期函數,用來監聽頁面卸載.當wx.navigateTo和 navigateBack的時候調用.
onPullDownRefresh 頁面相關事件處理函數,用來監聽用戶的下拉動做.可是須要在config的window選項中開啓enablePullDownRefresh,當數據刷新完成以後,能夠用wx.stopPullDownRefresh中止當前頁面的下拉刷新.
尺寸單位
rpx單位是微信小程序中css的尺寸單位，rpx能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。
如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
微信小程序也支持rem尺寸單位，rem和rpx的換算關係：rem: 規定屏幕寬度爲20rem；1rem = (750/20)rpx
注：開發微信小程序時設計師能夠用 iPhone6 做爲視覺稿的標準。
設置底部導航 app.json
"tabBar": { "color": "#a9b7b7", "selectedColor": "#666666", "borderStyle": "white", "list": [ { "selectedIconPath": "images/homeb.png", "iconPath": "images/home.png", "pagePath": "pages/index/index", "text": "首頁" }, { "selectedIconPath": "images/fireb.png", "iconPath": "images/fire.png", "pagePath": "pages/index/recom", "text": "推薦" }, { "selectedIconPath": "images/huodb.png", "iconPath": "images/huod.png", "pagePath": "pages/index/activity", "text": "活動" }, { "selectedIconPath": "images/userb.png", "iconPath": "images/user.png", "pagePath": "pages/index/user", "text": "個人" } ] }