準(zhǔn)備工作

1. 登錄微信公眾平臺(tái)注冊(cè)開(kāi)發(fā)者

2. 注冊(cè)完成后登錄，下載微信開(kāi)發(fā)者工具

   在 開(kāi)發(fā) => 開(kāi)發(fā)設(shè)置里查看自己的APPID。這是小程序的身份證號(hào)秸讹，不要告訴別人哈

3. 啟動(dòng)微信開(kāi)發(fā)者工具庆猫，就可以創(chuàng)建項(xiàng)目了。

目錄結(jié)構(gòu)：

1：pages 存放項(xiàng)目頁(yè)面相關(guān)文件

image

2：utils 里面包含一些公共的代碼抽取的js文件岛抄，作為模塊方便使用

image

3： 配置文件

image

進(jìn)入正題

基本標(biāo)簽組件

<view></view>
<text></text>

模板語(yǔ)法

• 條件渲染

    <view wx:if="{{表達(dá)式}}">xxx</view>
    <view wx:elif="{{表達(dá)式}}">xxx</view>
    <view wx:else>xxx</view>

• 列表渲染

    <view wx:for="{{list}}" wx:key="{{index}}">{{index}}--{{item}}</view>

    <text wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myindex">
        {{myindex}}~{{myitem}}
    </text>

• 模板 template

<!-- 定義 -->
<template name="temp">
    <view>標(biāo)題：{{name}}</view>
</template>

<!-- 調(diào)用 -->
<template is="temp" {{name:"han"}}>

<!-- 導(dǎo)入模板 -->
<import src = "xxx.wxml" />

• 模塊引用

<include src="xxx.wxml" />

注意：WXML 提供 import 和 include 兩種文件引用方式别惦。

• import 有作用域的概念，不能多重引用
• include 就可以多重引用
• import是只引用<template/>模板夫椭，而include是copy除<template/>標(biāo)簽以外的全部代碼

事件

基本事件類(lèi)型

bindtap 單擊
bindinput 表單發(fā)生改變

事件參數(shù)

    <view bindtap="showMsg" data-msg="xxx"></view>
    
<!-- 
    js代碼
        showMsg(e){
            e.target.dataset.msg //獲取事件參數(shù)
        }
-->

表單

    <input value="{{msg}}" bindinput="inputHd"></input>

<!-- 
    js代碼
        inputHd(e){
            e.detail.value   //表單的值
        }
-->

組件和API

常用組件

• 容器 view
• 內(nèi)容 text
• 表單 input/button
• 媒體 image

常用方法

• showToast

    // 顯示輕提示
    wx.showToast({
        title:'成功',
        icon:'success',
        duration:2000
    })
    
    // 關(guān)閉輕提示
    wx.hideToast()

• showLoading

    // 顯示loading
    wx.showLoading({
        title:'加載中',
    })
    setTimeout(function(){
        // 隱藏loading
        wx.hideLoading()
    },2000)

• 數(shù)據(jù)存儲(chǔ)

    // setStorageSync存儲(chǔ)數(shù)據(jù)
    wx.setStorageSync('key','value')

    // getStorageSync獲取數(shù)據(jù)
    var value = wx.getStorageSync('key')

• wx.request請(qǐng)求數(shù)據(jù)

    wx.request({
        url:'https://www.aiav.vip/api/xxxx',    // 請(qǐng)求路徑
        success(res) {
            console.log(res.data)       // 響應(yīng)結(jié)果
        }
    })

導(dǎo)航

利用navigator標(biāo)簽跳轉(zhuǎn)頁(yè)面

     <!-- 基本使用 -->
     <navigator url="/pages/a/a">A頁(yè)面</navigator>
     
     <!-- 無(wú)歷史記錄 -->
     <navigator url="/pages/a/a" open-type="redirect">A頁(yè)面</navigator>
     
     <!-- 切換Tabbar -->
     <navigator url="/pages/a/a" open-type="switchTab">A頁(yè)面</navigator>
     
     <!-- 返回 -->
     <navigator url="/pages/a/a" open-type="navigateBack">A頁(yè)面</navigator>
     
     <!-- 傳參 -->
     <navigator url="/pages/a/a?id=123">A頁(yè)面</navigator>

js方式跳轉(zhuǎn)

        wx.navigateTo({url:''})     // 跳轉(zhuǎn)頁(yè)面
        wx.redirectTo({url:''})     // 跳轉(zhuǎn)不留歷史記錄
        wx.switchTab({url:''})      // Tabbar切換
        wx.navigateBack()           // 返回

生命周期

• onLoad 頁(yè)面初始化掸掸，參數(shù)為路由跳傳 傳遞的參數(shù)
• onShow 前臺(tái)顯示
• onReady 頁(yè)面首次渲染
• onHide 后臺(tái)顯示
• onUnload 頁(yè)面卸載(redirect時(shí)候，頁(yè)面就會(huì)卸載)

頁(yè)面全局方法

• onPullDownRefresh 下拉刷新
• onReachBottom 上拉觸底
• onShareAppMessage 分享

官方文檔