1、小程序 – 模板與配置

1.1 WXML模板語法

數(shù)據(jù)綁定

• 在data中定義數(shù)據(jù)

Page({
    data:{
        //字符串類型數(shù)據(jù)
        info:'init data',
        //數(shù)組類型數(shù)據(jù)
        msgList:[{msg:'hello'},{nsf:'world'}]
    }
})

• 在WXML中使用數(shù)據(jù)

<view>{{ 要綁定的數(shù)據(jù)名稱 }}</view>
//Mustache語法(雙大括號)
//應(yīng)用場景：綁定內(nèi)容,綁定屬性,運(yùn)算（三元運(yùn)算、算術(shù)運(yùn)算等)

事件綁定

• 事件是渲染層到邏輯層的通訊方式

• 小程序中常用事件

• 事件對象的屬性列表
  • 當(dāng)事件回調(diào)觸發(fā)的時(shí)候，會(huì)收到一個(gè)事件對象event，它的詳細(xì)屬性如下表所示:

• 事件綁定語法格式：

//wxml
<button type="primary" bindtap="btnTapHandler">按鈕</button>

//js
Page({
  btnTapHandler(e){
    console.log(e)
  },  
})

• 在事件處理函數(shù)中為data中的數(shù)據(jù)賦值

Page({
  data:{
    count:0
  },
  changeCount(){
    this.setData({
      count:this.data.count + 1//修改
    })
  }
})

• 事件傳參

//wxml
<button bindtap = "btnHandler" data-info="{{2}}">事件傳參</button>
//通過data-*自定義屬性傳參

//js
btnHandler(event){
    console.log(event.target.dataset.info)
}
//通過event.target.dataset.參數(shù)名獲取到具體參數(shù)的值

• bindinput語法格式
  • 通過input事件來響應(yīng)文本框的輸入事件

//wxml
<input bindinput="inputHandler"></input>

//js
Page({
  inputHandler(e){
    console.log(e.detail.value)
  }
})

數(shù)據(jù)同步

• 步驟

1. 定義數(shù)據(jù)(data數(shù)據(jù))
2. 渲染結(jié)構(gòu)(wxml)
3. 美化樣式(wxss)
4. 綁定input事件處理函數(shù)(js函數(shù))

條件渲染

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

//要一次性控制多個(gè)組件的展示與隱藏，可以使用一個(gè)<block> </block>標(biāo)簽將多個(gè)組件包裝起來，<block>并不是一個(gè)組件，它只是一個(gè)包裹性質(zhì)的容器，不會(huì)在頁面中做任何渲染。
<block wx: if="{{true}}">
    <view> view1 </view>
	<view> view2 </view>
</block>

//hidden也能控制元素的顯示與隱藏
<view hidden="{{condition}}">條件為true隱藏，條件為 false顯示</view>

• wx:if 與 hidden 的對比
  1. 運(yùn)行方式不同
     • wx:if 以動(dòng)態(tài)創(chuàng)建和移除元素的方式，控制元素的展示與隱藏
     • hidden 以切換樣式的方式(display: none/block;)，控制元素的顯示與隱藏
  2. 使用建議
     • 頻繁切換時(shí),建議使用hidden
     • 控制條件復(fù)雜時(shí)，建議使用wx:if 搭配wx:elif、wx:else進(jìn)行展示與隱藏的切換

列表渲染

<view wx:for="{{arr}}">
  索引是：{{index}}, item項(xiàng)：{{item}}
</view>
//默認(rèn)情況下，當(dāng)前循環(huán)項(xiàng)的索引用index表示;當(dāng)前循環(huán)項(xiàng)用item表示
//也可以手動(dòng)指定索引和當(dāng)前項(xiàng)的變量名 wx:for-index="" wx:for-item=""

//小程序在實(shí)現(xiàn)列表渲染時(shí)，也建議為渲染出來的列表項(xiàng)指定唯一的key值，從而提高渲染的效率
//wxml
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
//js
Page({
  data:{
    userList:[
      {id:1,name:'小紅'},
      {id:2,name:'小黃'},
      {id:3,name:'小白'}
    ]
  },
})

1.2 WXSS模板樣式

rpx

• rpx (responsive pixel）是微信小程序獨(dú)有的，用來解決屏適配的尺寸單位

• rpx的實(shí)現(xiàn)原理：鑒于不同設(shè)備屏幕的大小不同，為了實(shí)現(xiàn)屏幕的自動(dòng)適配，rpx把所有設(shè)備的屏幕，在寬度上等分為750份(即:當(dāng)前屏幕的總寬度為750rpx)

  • 在較小的設(shè)備上,1rpx所代表的寬度較小

  • 在較大的設(shè)備上， 1rpx所代表的寬度較大

• 小程序在不同設(shè)備上運(yùn)行的時(shí)候，會(huì)自動(dòng)把rpx的樣式單位換算成對應(yīng)的像素單位來渲染，從而實(shí)現(xiàn)屏幕適配

• 開發(fā)中建議采用iPhone 6作為視覺設(shè)計(jì)稿

樣式導(dǎo)入

• 使用WXSS提供的import語法?？梢詫?dǎo)入外聯(lián)的樣式表

@import "demo.wxss"

全局樣式

• 定義在app.wxss中的樣式為全局樣式，作用于每一個(gè)頁面

局部樣式

• 在頁面的.wxss文件中定義的樣式為局部樣式，只作用于當(dāng)前頁面

• 注意:

  • 當(dāng)局部樣式和全局樣式沖突時(shí)，根據(jù)就近原則，局部樣式會(huì)覆蓋全局樣式
  • 當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時(shí)，才會(huì)覆蓋全局的樣式

1.3 全局配置

• 小程序根目錄下的 app.json文件是小程序的全局配置文件。常用的配置項(xiàng)如下:
  • pages：記錄當(dāng)前小程序所有頁面的存放路徑
  • window：全局設(shè)置小程序窗口的外觀
  • tabBar：設(shè)置小程序底部的tabBar效果
  • style：是否啟用新版的組件樣式

window

• 常用配置項(xiàng)

tabBar

• tabBar是移動(dòng)端應(yīng)用常見的頁面效果,用于實(shí)現(xiàn)多頁面的快速切換，分為底部和頂部兩類
• 只能配置最少2個(gè)，最多5個(gè)tab頁簽；渲染頂部tabBar時(shí)并不顯示icon

• tabBar配置項(xiàng)：

• 每個(gè)tab項(xiàng)的配置選項(xiàng)

1.4 頁面配置

• 小程序中，每個(gè)頁面都有自己的.json配置文件，用來對當(dāng)前頁面的窗口外觀、頁面效果等進(jìn)行配置
• 當(dāng)頁面配置與全局配置沖突時(shí)，根據(jù)就近原則，最終的效果以頁面配置為準(zhǔn)
• 常用配置項(xiàng)：(同全局配置項(xiàng))

1.5 網(wǎng)絡(luò)數(shù)據(jù)請求

• 出于安全性方面的考慮，小程序官方對數(shù)據(jù)接口的請求做出了如下兩個(gè)限制:
  • 只能請求HTTPS類型的接口
  • 必須將接口的域名添加到信任列表中

• 配置域名步驟：登錄微信小程序管理后臺 -> 開發(fā) -> 開發(fā)設(shè)置 -> 服務(wù)器域名 -> 修改request合法域名

• 注意：

  • 域名只支持https協(xié)議
  • 域名不能使用IP地址或localhost
  • 域名必須經(jīng)過ICP備案
  • 服務(wù)器域名一個(gè)月內(nèi)最多可申請5次修改

• 發(fā)起GET請求

wx.request({
      url: 'https://www.escook.cn/api/get', //請求的接口地址，必須是基于https協(xié)議
      method:'GET',  //請求的方式
      data:{         //發(fā)送到服務(wù)器的數(shù)據(jù)
        name:'xyk',
        age:21
      },
      success:(res=>{  //請求成功之后的回調(diào)函數(shù)  
        console.log(res)
      })
    })

• 發(fā)起POST請求

wx.request({
      url: 'https://www.escook.cn/api/post', //請求的接口地址，必須是基于https協(xié)議
      method:'POST',  //請求的方式
      data:{         //發(fā)送到服務(wù)器的數(shù)據(jù)
        name:'xyk',
        age:21
      },
      success:(res)=>{  //請求成功之后的回調(diào)函數(shù)  
        console.log(res)
      }
    })

• 頁面加載時(shí)請求數(shù)據(jù)

//生命周期函數(shù)
onLoad(options) {
  this.getInfo()
  this.postInfo()
},

• 跳過合法域名檢驗(yàn)
  • 我們可以在微信開發(fā)者工具中，臨時(shí)開啟「開發(fā)環(huán)境不校驗(yàn)請求域名、TLS版本及 HTTPS證書」選項(xiàng)，跳過request 合法域名的校驗(yàn)
  • 僅限在開發(fā)與調(diào)試階段使用

文章來源地址http://www.zghlxwxcb.cn/news/detail-826099.html

• 關(guān)于跨域和Ajax
  • 跨域問題只存在于基于瀏覽器的Web開發(fā)中。由于小程序的宿主環(huán)境不是瀏覽器，而是微信客戶端，所以小程序中不存在跨域的問題
  • Ajax技術(shù)的核心是依賴于瀏覽器中的XMLHttpRequest這個(gè)對象，由于小程序的宿主環(huán)境是微信客戶端，所以小程序中不能叫做“發(fā)起Ajax請求”，而是叫做“發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請求”

到了這里，關(guān)于快速搭建微信小程序：模板和配置詳細(xì)介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！