1. 配置文件：路由
"pages":[
? ? "pages/index/index",
? ? "pages/class/class",
? ? "pages/show/show",
? ? "pages/message/message",
? ? "pages/home/home"
? ]
路由跳轉(zhuǎn)：
wx:navigateTo({
? ? url:"pages/index/index"
})
2. 配置文件：window
"window":{
? ? "navigationBarBackgroundColor":"#ff0",
? ? "navigationBarTitleText":"我的小程序",
? ? "navigationBarTextStyle":"black"
? },
3. 路由跳轉(zhuǎn)
wx.navigateTo?跳轉(zhuǎn)后保留跳轉(zhuǎn)記錄
<buttonbindtap="jump">button</button>
? jump(){
? ? wx:wx.navigateTo({
? ? ? url: '/pages/home/home'
? ? })
? }
url 不能優(yōu)后綴，self 是在當(dāng)前小程序內(nèi)打開
<navigator
target="self"
url="/pages/home/home"
open-type="navigate"
>
? <button>跳轉(zhuǎn)</button>
</navigator>
路由返回：使用open-type="navigateBack"路由返回，使用delta="1"規(guī)定返回幾層
<navigator
target="self"
open-type="navigateBack"
delta="1"
>
? <button>返回</button>
</navigator>
3.1 路由傳參
使用 ？傳參
<navigator
target="self"
url="/pages/home/home?id=001"
>
? <button>跳轉(zhuǎn)</button>
</navigator>
跳轉(zhuǎn)后的頁(yè)面，接參時(shí)直接接收到傳的 json 參數(shù)
onLoad: function (options) {
? ? console.log(options);
? },
獲取 app中數(shù)據(jù)
var app = getApp()
4. 配置文件：導(dǎo)航欄
"tabBar":{
? ? "color": "#333333",????????????????
? ? "selectedColor": "#00ff00",????????
? ? "backgroundColor": "#eeeeee",????
? ? "list":[????????????????????????
? ? ? {
? ? ? ? "pagePath":"pages/index/index",????????????????
? ? ? ? "text":"首頁(yè)",?????????????????????????????
? ? ? ? "iconPath":"logo/shouye.png",????????????????
? ? ? ? "selectedIconPath": "logo/shouye-ch.png"????
? ? ? },
? ? ? {
? ? ? ? "pagePath":"pages/class/class",
? ? ? ? "text":"分類",
? ? ? ? "iconPath":"logo/fenlei.png",
? ? ? ? "selectedIconPath": "logo/fenlei-ch.png"
? ? ? },
? ? ? {
? ? ? ? "pagePath":"pages/show/show",
? ? ? ? "text":"展示",
? ? ? ? "iconPath":"logo/zhanshi.png",
? ? ? ? "selectedIconPath": "logo/zhanshi-ch.png"
? ? ? },
? ? ? {
? ? ? ? "pagePath":"pages/message/message",
? ? ? ? "text":"消息",
? ? ? ? "iconPath":"logo/xiaoxi.png",
? ? ? ? "selectedIconPath": "logo/xiaoxi-ch.png"
? ? ? },
? ? ? {
? ? ? ? "pagePath":"pages/home/home",
? ? ? ? "text":"我的",
? ? ? ? "iconPath":"logo/home.png",
? ? ? ? "selectedIconPath": "logo/home-ch.png"
? ? ? }
? ? ]
? }
5. 數(shù)據(jù)綁定
<view> {{ message }} </view>
Page({
? data: {
? ? message: 'Hello world!'
? }
})
6. 條件渲染
wx:if?和?hidden
<view wx:if="{{index==n}}" >
????<text>{{item.msg}}</text>
</view>
<block></block>
7. 列表渲染
key?屬性直接寫，不用加?{{ }}
<view wx:for="{{list}}" wx:for-index="key" wx:for-item="val" wx:key="id" >
????<text>{{key}} - {{val.msg}}</text>
</view>
8. 綁定事件
一般點(diǎn)擊事件用?bindtap
事件傳參時(shí)不是直接傳，需要用一個(gè)自定義屬性
如?data-index="{{index}}"
事件函數(shù)中用?event.currentTarget.dataset.index?接收
需要?this.setData({ })?引起頁(yè)面自動(dòng)渲染
<button bindtap="func" data-index="{{index}}">{{item.title}}</button>
func: function(ev){
? ? this.setData({
? ? ? n: ev.currentTarget.dataset.index
? ? })
? }
bind：綁定事件，事件可以冒泡
catch：綁定事件，事件不能冒泡（阻止事件冒泡）
9. 場(chǎng)景值
**場(chǎng)景值：**就是用戶通過什么方式進(jìn)入的小程序
var scene = wx.getLaunchOptionsSync().scene;
console.log(scene);
onLaunch(options){
????var scene = options.scene;
????console.log(scene);
}
10. 生命周期函數(shù)
Page({
? onload(){
? ? console.log("load");
? },
? onShow(){
? ? console.log("show");
? },
? onHide(){
? ? console.log("hide");
? },
? onPageNotFound(){
? ? console.log("404");
? },
? onPullDownRefresh(){
? ? console.log("下拉");
? },
? onReachBottom(){
? ? console.log("觸底上拉");
? }
})
11. 模板
定義模板時(shí)需要寫一個(gè)?name?屬性
<templatename="nav">
? <view class="nav_box" wx:for="{{arr}}" wx:key="*this">
? ? <text>{{item}}</text>
? </view>
</template>
**data：**data里是傳給模板的值
<import src="/template/nav.wxml" />
<template is="nav" data="{{arr}}"></template>
使用?@import?引入其他樣式表
@import '/assets/nav.wxss'
12. 組件
1. view 視圖容器
<view></view>????????????????????????
hover-class = "none"????????????????
hover-stop-propagation = "false"????
hover-start-time = "50"????????????????
hover-stay-time = "600"????????????????
2. icon 圖標(biāo)
<icon></icon>????????????????
type = "success"????????????
????? "success_no_circle"
????? "info"
????? "warn"
????? "waiting"
????? "cancel"
????? "download"
????? "search"
????? "clear"
size = "23"????????
color????????????
3. text 文本
<text></text>????????????
selectable = "false"????
space????????????????????
decode????????????????????
4. rich-text 富文本
使用特殊文本標(biāo)簽：如h1~h6
<rich-textnodes="
hello
"></rich-text>nodes????????????????
space = "nbsp"????????
5. image 圖片
<image></image>????????????
src????????????????????????
mode = "scaleToFill"????
lazy-load = "false"????????
13. 數(shù)據(jù)雙向綁定
使用?model?雙向綁定數(shù)據(jù)
<inputmodel:value="{{msg}}"></input>
表單數(shù)據(jù)：在?form?中綁定函數(shù)，獲取表單數(shù)據(jù)。獲取表單數(shù)據(jù)時(shí)必須使用?name?屬性
<formbindsubmit="sub">
賬號(hào)：<input name="name" value="{{user.name}}"></input>
密碼：<input name="pass" value="{{user.pass}}"></input>
<button
form-type="submit"
>提交</button>
</form>
使用?ev.detail.value?獲取表單數(shù)據(jù)
Page({
? data: {
? ? user:{
? ? ? name:"",
? ? ? pass:""
? ? }
? },
? sub(ev){
? ? console.log(ev.detail.value);
? }
})
14. 音頻播放
使用?wx.createInnerAudioCOntext()?api接口實(shí)現(xiàn)音頻播放
<buttonbindtap="player">music</button>
player(){
? ? var music = wx.createInnerAudioCOntext();
? ? music.src = "/1.mp3";
? ? music.play();
}
15. 模塊化
定義模塊：common.js
兩種打包方式
function sayHello(val){
? console.log(`hello ${val}`);
}
module.exports.sayHello = sayHello
exports.sayHello = sayHello
require?：引入包才能使用
var comm = require('common.js')
Page({
? btnClick(){
? ? comm.sayHello("123")
? }
})
16. 數(shù)據(jù)請(qǐng)求
wx.request({
? url: 'url',
? method: 'get',
? data:{},
? header:{
? ? "content-type": "application/json"
? },
? success:(res)=>{
? ? console.log(res);
? },
? fail:(err)=>{
? ? console.log(err);
? }
})
封裝
const ajax = (url,method,data)=>{
? return new Promise((res,rej)=>{
? ? wx.request({
? ? ? url,
? ? ? method,
? ? ? data,
? ? ? header:{
? ? ? ? "content-type": "application/json"
? ? ? },
? ? ? success:(data)=>{
? ? ? ? res(data)
? ? ? },
? ? ? fail:(err)=>{
? ? ? ? rej(err)
? ? ? }
? ? })
? })
}
export default ajax;
17. 本地存儲(chǔ)
1. 存儲(chǔ)
wx.setStorage({
? data: "hello world",
? key: 'title',
? success:(res)=>{
? ? console.log(res);
? },
? fail: (err)=>{
? ? console.log(err);
? }
})
wx.setStorageSync('name', "微信小程序")
2. 查詢
wx.getStorage({
? key: 'title',
? success: (res)=>{
? ? console.log(res);
? },
? fail: (err)=>{
? ? console.log(err);
? }
})
wx.getStorageInfo({
? success (res) {
? ? console.log(res.keys)
? ? console.log(res.currentSize)
? ? console.log(res.limitSize)
? }
})
var res = wx.getStorageSync('name')
console.log(res);
try {
? const res = wx.getStorageInfoSync()
? console.log(res.keys)
? console.log(res.currentSize)
? console.log(res.limitSize)
} catch (e) {
}
3. 刪除
wx.removeStorage({
? key: 'title',
? success: res=>{
? ? console.log(res);
? },
? fail: err=>{
? ? console.log(err);
? }
})
wx.removeStorageSync('name')
18. WEUI
安裝
npm install weui-miniprogram
配置
工具 --> 構(gòu)建npm
詳情 --> 本地配置 --> 使用 npm 模塊
引入?app.wxss
@import'/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
19. mpvue 框架
安裝vue腳手架
創(chuàng)建項(xiàng)目
vue init mpvue/mpvue-quickstart my-project
安裝包
npm install
啟動(dòng)
npm run dev
項(xiàng)目目錄
index
????index.vue????//頁(yè)面,組件
????main.js????????//導(dǎo)出組件 (文件名固定)
????main.json????//配置文件 (文件名固定)
不支持的語(yǔ)法
v-html不支持
不支持過濾器
不支持在 template 內(nèi)使用 methods 中的函數(shù)
不支持在組件上使用class?style
列表渲染?需要索引?index
事件修飾符?.stop?，其他的都不支持
20. API
1. 動(dòng)態(tài)設(shè)置當(dāng)前頁(yè)面標(biāo)題
wx.setNavigationBarTitle({
? title: "title"
})
2. 跳轉(zhuǎn)頁(yè)面 (帶參)
wx.navigateTo({
? url: "/pages/list/main?type="+data
});
21. Vue 小程序
document.title = "頁(yè)面標(biāo)題";
window.addEventListener([事件類型(click)], [調(diào)用的函數(shù)(函數(shù)名)], [冒泡還是捕獲]);
window.removeEventListener();
* 問題
1.?wx:key?報(bào)錯(cuò)：does not look like a valid key name
看起來(lái)不像一個(gè)有效的鍵名
直接寫 wx:key=id，不用加 {{}}
2. does not have a method to handle event “tap”
沒有方法來(lái)處理事件“tap”。
1.事件傳參時(shí)不能直接傳參
2.用自定義屬性傳參
3.事件函數(shù)中用event接收
如：
<button bindtap="func" data-index="{{index}}">{{item.title}}</button>
<script>
func:function(ev){
this.setData({
? ? ? n: ev.currentTarget.dataset.index
})
}
</script>
3. 根據(jù)?sitemap?的規(guī)則[0]，當(dāng)前頁(yè)面 [pages/class/class] 將被索引
在小程序項(xiàng)目配置文件?project.config.json?的?setting?中加入
"checkSiteMap": false,
4. the server responded with a status of 500
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-mM1nVl0p-1661839632797)(F:\Markdown\upload\20190820235806120.PNG)]
1.渲染層網(wǎng)絡(luò)層錯(cuò)誤
2.檢查圖片路徑
5. Cannot set property ‘data’ of undefined
有時(shí)候使用
this
時(shí)會(huì)出現(xiàn)
?undefined?
的情況
data () {
? return {
? ? data:[]
? }
},
var app = getApp();????
app.globalData.data=[1,2];
console.log(app.globalData.data);
或者同步獲取
