一.小程序特點
小程序依賴微信
1.快，因為免去下載和安裝
2.小，一個包不能超過2M
3.強(qiáng),微信有什么能力它也擁有
4.廣,傳播微信圈子近10億用戶
二、使用準(zhǔn)備
1.注冊開發(fā)者帳號
注冊小程序帳號https://mp.weixin.qq.com/
2.下載微信開發(fā)者工具
穩(wěn)定版 Stable Build | 微信開放文檔https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.微信開發(fā)文檔
微信開放文檔https://developers.weixin.qq.com/miniprogram/dev/framework/
三、項目結(jié)構(gòu)
四、配置文件
1、app.json
pages 存放項目的頁面
哪個頁面在最前面，哪個頁面是默認(rèn)頁面
window 項目的窗口
"backgroundTextStyle": "light", 背景文字:light|dark
"navigationBarBackgroundColor": "#000", 導(dǎo)航欄背景顏色
"navigationBarTitleText": "BLACK", 導(dǎo)航欄標(biāo)題
"navigationBarTextStyle": "white" 導(dǎo)航欄文字顏色:white|black
tabBar 底部欄的配置
? "tabBar": {
? ? "color": "#484848",
? ? "selectedColor": "#109fef",
? ? "list": [{
? ? ? "pagePath": "pages/index/index",
? ? ? "text": "語法",
? ? ? "iconPath": "/images/index.png",
? ? ? "selectedIconPath": "/images/index.png"
? ? }]
? },
color 文字默認(rèn)顏色
selectedColor 文字選中顏色
list 頁面列表：
? ? ? ? pagePath 頁面地址
? ? ? ? text 文本
? ? ? ? iconPath 圖標(biāo)地址
? ? ? ? selectedIconPath 選中圖標(biāo)地址
2、頁面.json
"usingComponents": {} 使用組件
"navigationBarTitleText": "基礎(chǔ)語法" 標(biāo)題
"enablePullDownRefresh": true 允許下拉刷新
"backgroundColor": "#eee" 背景顏色
"backgroundTextStyle": "dark" 背景文字顏色
五、小程序內(nèi)置組件（https://developers.weixin.qq.com/miniprogram/dev/component/）
例子：<view> 邏輯視覺分區(qū)(div)
<text> 文本(span)如<image> 圖片組件（常用）
src 圖片地址
mode 模式：
scaleToFill:不保持寬高比,縮放
aspectFit:保持寬高比,長邊優(yōu)先
aspectFill:保持寬高比,短邊優(yōu)先
widthFix:寬不變,高自動
heightFix:高不變,寬自動
left right top bottom center:顯示局部
六、模板語法
條件渲染
wx:if="{{條件}}"
多重條件渲染
wx:elif="{{多重條件}}"
wx:else
文本渲染
placeholder="{{msg}}"? 屬性的渲染
列表渲染
<view wx:for="{{list}}" wx:key="index">{{index}}.{{item}}</view>
自定義列表渲染
多層for循環(huán) 定義名稱
<view wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myindex" wx:key="myindex">
{{myindex}}.{{myitem}}
</view>
注意：key值自動解構(gòu)。eg：若想使用item.docid做為key，wx:key="docid"即可
<template> 模板
定義:
<template name="user">
<view>用戶名：{{name}}</view>
</template>
導(dǎo)入：只能導(dǎo)入template
<import src="..."></import>
使用：
<template is="user" data="{{name:'mewow'}}"></template>
<include> 引入
<include src="..."></include>
相當(dāng)于把src的內(nèi)容拷貝一份放在當(dāng)前位置，不能導(dǎo)入template
七、事件
事件方法
bindTap 點擊
bindconfim 確認(rèn)
bindchange 表單值發(fā)生變化
bindinput 表單輸入
普通事件
調(diào)用方法：
<button bindTap="showMsg">事件</button>
自定義方法：
showMsg(){}
事件傳參
定義參數(shù)：
<button bindtap="showMsg" data-msg="小程序">小程序</button>
在方法中獲取參數(shù)：
showMsg(e){
? let msg=e.currentTarget.dataset.msg;
? wx.showToast({
? ? title: 'hello '+msg,
? ? icon:"loading"
? })
}
八、表單雙向綁定
表單：
<input type="text" value="{{msg}}" bindinput="changeHd"/>
定義方法更新視圖和data：
changeHd(e){
? let msg=e.detail.value;
? this.setData({msg})
}
九、data與更新
js方法里data數(shù)據(jù)：this.data.msg
在wxml使用：{{msg}}
更新data與視圖：this.setData({key1:value1,key2:value2})
注意：this指向,在wx.xxx api里面this的wx這個對象不是當(dāng)前頁面
十、微信api（https://developers.weixin.qq.com/miniprogram/dev/api/）
Page參數(shù)
data 存儲數(shù)據(jù)
onload() 當(dāng)頁面加載中
onPullDownRefresh 下拉刷新回調(diào)函數(shù)
onReachBottom 觸底回調(diào)函數(shù)
wx.xxx
wx.stopPullDownRefresh();? 停止下拉刷新
wx.showToast({})? 輕提示
wx.request({url,method,success(){}}) 網(wǎng)絡(luò)請求：
默認(rèn)請求地址需要在后端配置
默認(rèn)請求地址要求https
