一、微信小程序特點(diǎn)
二、使用準(zhǔn)備
1.注冊(cè)開(kāi)發(fā)者帳號(hào)
2.下載微信開(kāi)發(fā)者工具
3.微信開(kāi)發(fā)文檔
三、項(xiàng)目結(jié)構(gòu)
四、配置文件
1、app.json
pages 存放項(xiàng)目的頁(yè)面
window 項(xiàng)目的窗口
tabBar 底部欄的配置
2、頁(yè)面.json
五、小程序內(nèi)置組件
邏輯視覺(jué)分區(qū)(div)
文本(span)
圖片組件
選擇
圖標(biāo)
滾動(dòng)區(qū)域
幻燈片
六、模板語(yǔ)法
條件渲染
多重條件渲染
文本渲染
列表渲染
自定義列表渲染
一、微信小程序特點(diǎn)
小程序依賴微信
快，因?yàn)槊馊ハ螺d和安裝
小，一個(gè)包不能超過(guò)2M
強(qiáng),微信有什么能力它也擁有
廣,傳播微信圈子近10億用戶
QQ 微信 支付寶 字節(jié)跳動(dòng) 美團(tuán) 鴻蒙 都有類似小程序
二、使用準(zhǔn)備
1.注冊(cè)開(kāi)發(fā)者帳號(hào)
注冊(cè)小程序帳號(hào)
https://mp.weixin.qq.com/
2.下載微信開(kāi)發(fā)者工具
穩(wěn)定版 Stable Build | 微信開(kāi)放文檔
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.微信開(kāi)發(fā)文檔
微信開(kāi)放文檔
https://developers.weixin.qq.com/miniprogram/dev/framework/
三、項(xiàng)目結(jié)構(gòu)
四、配置文件
1、app.json
pages 存放項(xiàng)目的頁(yè)面
哪個(gè)頁(yè)面在最前面，哪個(gè)頁(yè)面是默認(rèn)頁(yè)面
window 項(xiàng)目的窗口
"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/base/base",
"text": "語(yǔ)法",
"iconPath": "/images/home.png",
"selectedIconPath": "/images/home-h.png"
}]
},
color 文字默認(rèn)顏色
selectedColor 文字選中顏色
list 頁(yè)面列表：
pagePath 頁(yè)面地址
text 文本
iconPath 圖標(biāo)地址
selectedIconPath 選中圖標(biāo)地址
2、頁(yè)面.json
"usingComponents": {} 使用組件
"navigationBarTitleText": "基礎(chǔ)語(yǔ)法" 標(biāo)題
"enablePullDownRefresh": true 允許下拉刷新
"backgroundColor": "#eee" 背景顏色
"backgroundTextStyle": "dark" 背景文字顏色
五、小程序內(nèi)置組件
<view> 邏輯視覺(jué)分區(qū)(div)
<text> 文本(span)
user-select="true" 用戶長(zhǎng)按可選擇
<image> 圖片組件
src 圖片地址
mode 模式：
scaleToFill:不保持寬高比,縮放
aspectFit:保持寬高比,長(zhǎng)邊優(yōu)先
aspectFill:保持寬高比,短邊優(yōu)先
widthFix:寬不變,高自動(dòng)
heightFix:高不變,寬自動(dòng)
left right top bottom center:顯示局部
<input>
value 值
placeholder 提示文本
password="true" 密碼框
type 彈出不同鍵盤(pán)：
text 文本輸入鍵盤(pán)
number 數(shù)字輸入鍵盤(pán)
idcard 身份證輸入鍵盤(pán)
digit 帶小數(shù)點(diǎn)的數(shù)字鍵盤(pán)
safe-password 密碼安全輸入鍵盤(pán) 指引
nickname 昵稱輸入鍵盤(pán)
confirm-type 鍵盤(pán)右下角案例
send 右下角按鈕為“發(fā)送”
search 右下角按鈕為“搜索”
next 右下角按鈕為“下一個(gè)”
go 右下角按鈕為“前往”
done 右下角按鈕為“完成”
<button> 按鈕
type 顏色類型
primary 綠色
default 白色
warn 紅色
size="mini" 行內(nèi)小按鈕
<switch> 切換
color 顏色
type="checkbox" 選擇框
<picker> 選擇
header-text 標(biāo)題文本
mode：
times 事件
date 日期
region 省市區(qū)
<icon> 圖標(biāo)
type：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size="100" 單位為px
<scroll-view> 滾動(dòng)區(qū)域
scroll-x 水平
scroll-y 垂直
<swiper> <swiper-item> 幻燈片
indicator-dots="true" 是否顯示提示點(diǎn)
autoplay="true" 自動(dòng)播放
circular="true" 銜接滑動(dòng)
六、模板語(yǔ)法
條件渲染
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值自動(dòng)解構(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 點(diǎn)擊
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這個(gè)對(duì)象不是當(dāng)前頁(yè)面
十、微信api
Page參數(shù)
data 存儲(chǔ)數(shù)據(jù)
onload() 當(dāng)頁(yè)面加載中
onPullDownRefresh 下拉刷新回調(diào)函數(shù)
onReachBottom 觸底回調(diào)函數(shù)
wx.xxx
wx.stopPullDownRefresh(); 停止下拉刷新
wx.showToast({}) 輕提示
wx.request({url,method,success(){}}) 網(wǎng)絡(luò)請(qǐng)求：
默認(rèn)請(qǐng)求地址需要在后端配置
默認(rèn)請(qǐng)求地址要求https