優(yōu)點(diǎn)
- 無(wú)需安裝挤庇。
- 隨處可見(jiàn)寂祥，隨處使用。
- 使用完踏枣，無(wú)需寫(xiě)在卸載昌屉。
小程序的申請(qǐng)地址。
安裝微信小程序工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
小程序的目錄結(jié)構(gòu)
app.js（小程序的主要邏輯）
app.json （小程序全局的公共配置）
app.wxss （小程序全局的公共樣式表）
頁(yè)面的覆蓋掉全局的配置
新建頁(yè)面的步驟
- 在pages目錄下茵瀑，右鍵新建目錄间驮，在當(dāng)前新建的目錄下，新建page框架马昨。
- 在app.json的pages選項(xiàng)中添加新建頁(yè)面的路徑竞帽。
小程序的生命周期扛施，以及頁(yè)面的生命周期
*小程序生命周期：
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
onLaunch全局只會(huì)觸發(fā)一次。
*頁(yè)面生命周期：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
console.log("onload")
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
*/
onReady: function () {
console.log("onReady")
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () {
console.log("onShow")
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
*/
onHide: function () {
onsole.log("onHide")
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
*/
onUnload: function () {
onsole.log("onUnload")
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶(hù)點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
onLoad屹篓，onReady 只會(huì)渲染一次疙渣。
小程序的尺寸單位：“rpx”
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
flex 布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
數(shù)據(jù)綁定
- mustache語(yǔ)法：{{}}
- 單向數(shù)據(jù)綁定
動(dòng)態(tài)數(shù)據(jù)綁定
- 小程序的賦值通過(guò)this.setData(對(duì)象)
var apiData = {
textStr:"sever data",
name:"jack"
};
this.setData(apiData);
- 獲取data的值
this.data.key 值
小程序的條件渲染
wx:if為true顯示元素，為false就不顯示元素抱虐。
<view style="text-align: center">考試成績(jī)</view>
<view>{{score}}</view>
<view wx:if = "{{score>60}}"> 及格</view>
<view wx:elif="{{score>90}}">優(yōu)秀</view>
<view wx:else>良好</view>
<view wx:if = "{{score != ''}}">不為空</view>
小程序的列表渲染
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html
- wx:for 綁定數(shù)組昌阿，wx:for-item值為當(dāng)前變量名 ，wx:for-index當(dāng)前下標(biāo)的變量名恳邀。
<block wx:for = "{{apiData}}" wx:for-item = "item">
<view class="item">
<view class="item_image">
<image src ="{{item.url}}" ></image>
</view>
<view class = "item_name"
>{{item.name}}
</view>
</view>
</block>
小程序事件綁定和事件交互
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
- bind+事件方法
- 需要在js中寫(xiě)對(duì)應(yīng)的方法
<view>
{{changeText}}
</view>
<button bindtap="changetext" bindlongtap="longtap">
改變文字
</button>
--------------------------
data: {
// textStr:"hello word11 "
// score:90
datalist:[],
changeText:"hello hundun"
},
changetext:function(){
// console.log(1)
this.setData({
changeText:" ni hao ya "
})
},
longtap:function(){
console.log("longtap")
},
小程序事件機(jī)制 catch和bind
- bind 會(huì)用到冒泡的機(jī)制懦冰，catch會(huì)阻止事件的冒泡。
- 捕獲階段的bind 和catch
<view class="container" bindtap="containertap">
<text class="text" catchtap="texttap">點(diǎn)擊</text>
</view>
capture-bind:tap(捕獲事件)
capture-catch:tap（捕獲事件）
<view class="container" bindtap="containertap" capture-bind:tap = "captruecontainer">
<text class="text" bindtap="texttap" capture-bind:tap = "captruetext">點(diǎn)擊</text>
</view>
捕獲事件先于綁定事件谣沸。從外層到內(nèi)層捕獲刷钢，從內(nèi)層到外層綁定。
小程序的基礎(chǔ)組件和常用組件
https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
- icon
- progress
- rich-text
- text
<icon type = "search" size = "200" color = "red"></icon>
<progress percent="50" show-info ="false" stroke-width = "20"
active = "true"> </progress>
<text selectable="true">hahha </text>
<rich-text nodes = "{{textrich}}" ></rich-text>
小程序的表單組件
https://developers.weixin.qq.com/miniprogram/dev/component/input.html
- input
- checkbox
- checkbox-group
- button
- form
<form bindsubmit="bindsubmitform" bindreset="bindrestform">
<input name ="input" placeholder="請(qǐng)輸入" bindinput="inputfuc">
</input>
<button name = "button" type="warn" plain="false" loading="false"> 按鈕</button>
<view>
<checkbox-group name = "checkbox-group" bindchange = "onchangecheck">
<label>
<checkbox value="java">
java
</checkbox>
</label>
<label>
<checkbox value="c++">
c++
</checkbox>
</label>
<label>
<checkbox value="c">
c
</checkbox>
</label>
</checkbox-group>
</view>
<button form-type="submit"> 提交 </button>
<button form-type="reset">重置 </button>
</form>
畫(huà)布
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
swiper
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
<swiper indicator-dots="{{indicator}}" autoplay="{{autoplay}}" previous-margin ="{{previous}}">
<block wx:for="{{imagesss}}" wx:key ="*this">
<swiper-item>
<image src="{{item}}" class = "swiper-item"></image>
</swiper-item>
</block>
</swiper>
特殊的覆蓋組件
https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
<map>
<cover-view class="coverdata">
hhhh
</cover-view>
</map >
小程序頁(yè)面導(dǎo)航組件
https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
<navigator url = "/pages/sort/sort" hover-class="navigator-hover" open-type="reLaunch"> 跳轉(zhuǎn)到分類(lèi)頁(yè)面</navigator>
小程序常用路由跳轉(zhuǎn)
- wx.navigateTo：保留當(dāng)前頁(yè)面乳附，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面内地。但是不能跳到 tabbar 頁(yè)面。使用 wx.navigateBack 可以返回到原頁(yè)面赋除。小程序中頁(yè)面棧最多十層阱缓。
- wx.switchTab：跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面
- wx.reLaunch：關(guān)閉所有頁(yè)面举农，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
- wx.navigateBack： 關(guān)閉當(dāng)前頁(yè)面荆针，返回上一頁(yè)面或多級(jí)頁(yè)面“湓悖可通過(guò) getCurrentPages 獲取當(dāng)前的頁(yè)面棧航背，決定需要返回幾層。
- wx.redirectTo：關(guān)閉當(dāng)前頁(yè)面棱貌，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面玖媚。但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面。
<view bindtap = "tapNext"> 跳轉(zhuǎn)到2級(jí)頁(yè)面</view>
tapNext:function(){
wx.redirectTo({
url: '/pages/sort/sort',
success:function(e){
console.log(e)
}
})
},
小程序的頁(yè)面?zhèn)鲄⒑腿ⅰ?/h5>
<navigator url="/pages/sort/sort?id=1&name=aaaa"> 小程序的傳遞參數(shù)</navigator>
onLoad: function (options) {
console.log(options)
},
小程序的底部導(dǎo)航欄
<navigator url="/pages/sort/sort?id=1&name=aaaa"> 小程序的傳遞參數(shù)</navigator>
onLoad: function (options) {
console.log(options)
},
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html
app.json
"tabBar": {
"color": "#000",
"sselectedColor":"#0f0",
"borderStyle":"black",
"list": [{
"pagePath": "pages/index/index",
"text": "首頁(yè)",
},{
"pagePath": "pages/sort/sort",
"text": "分類(lèi)"
}]
}
利用require加載js文件
var formate = require("../../utils/util.js")
onLoad:function(options){
var date = new Date()
console.log(date)
var d = formate.formatTime(date)
console.log(d)
}
WXML的模版編寫(xiě)和引入
wxs模塊引用婚脱。
https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html
// 創(chuàng)建wxs文件今魔。
var textStr = "hello world"
var num = function(num1,num2){
return num1+num2;
}
module.exports = {
message:textStr,
add:num
}
//引入wxs
<wxs module = "test" src = "../../wxs/util.wxs">
</wxs>
<view>{{test.message}}</view>
<view>{{test.add(1,11)}}</view>
