?

全棧開發(fā)工程師微信小程序-中(下)

微信小程序視圖層

wxml用于描述頁面的結(jié)構(gòu),wxss用于描述頁面的樣式,組件用于視圖的基本組成單元.

// 綁定數(shù)據(jù)
index.wxml
<view> {{message}} <view>

index.js
Page({
 data: ({
  message: 'Hello'
 })
})

?

// 組件屬性
// data中的數(shù)據(jù)綁定到微信小程序組件上
<view id="item-{{id}}"></view>

Page({
data: {
  id: 0
 }
})

?

<view wx:if="{{con}}"></view>

Page({
 data: {
  con: true
 }
})

?

<checkbox checked="{{false}}"></checkbox>

<view hidden="{{flag ? true : false}}">hello</view>

<view>{{a+b}}+{{c}}+d</view>

Page({
 data: {
  a: 1,
  b: 2,
  c: 3
 }
})

3+3+d

?

<view wx:if="{{len > 5}}"></view>

<view>{{"dashu" + name}}</view>

Page({
 data: {
  name: 'coding'
 }
})

?

<view>{{object.key}} {{array[0]}}</view>

Page({
 object: {
  key: "dashucoding"
 },
 array: ['dashu']
})

?

<view wx:if="{{con}}"> dashu </view>
// 是否進行渲染
<view wx:if="{{len > 4}}">view1</view>
<view wx:elif="{{len > 3}}">view2</view>
<view wx:else>view3</view>

?

<view wx:for="{{arr}}">
 {{index}} : {{item.message}}
</view>

Page({
 arr:[{
 message: "a",
 },{
  message: "b"
 }]
})

// wx:for-item指定數(shù)組當(dāng)前元素的變量名
// wx:for-index指定數(shù)組當(dāng)前項目下標(biāo)的變量名

<view wx:for="{{arr}}" wx:for-index="ind" wx:for-item="itemN">
 {{ind}} : {{itemN.message}}
</view>

一個包含多個節(jié)點的結(jié)構(gòu)塊block

<block wx:for="{{[1,2,3,4,5]}}">
<view> {{index}} </view>
<view> {{item}} </view>
</block>

?

// wx:key指定唯一標(biāo)識符
動態(tài)改變或有新列表的加入

<switch wx:for="{{obj}}" wx:key="con" style="display: block;"> {{item.id}} </switch>

Page({
 obj: [
  {id: 3, con:'con_3'},
  {id: 2, con:'con_2'},
  {id: 1, con:'con_1'},
 ]
})

?

// 定義模板 template
// 共用代碼,一次編寫多次使用
<template name="item">
<view>
  <text>{{index}} : {{time}}</view>
 </view>
</template>

// wxml
// is使用模板
<template is="item" data="{{item}}">

Page({
 data:: {
  index: 0
 }
})

?

<template name="old">
<view> old </view>
<template>
<template name="new">
<view> new </view>
</template>

<block wx:for="{{[2,3,4,5]}}">
<template is="{{item == 2 ? 'old' : 'new'}}"/>
</block>

?

// 引用功能
import引用目標(biāo)文件
<template name="item">
 <text>{{text}}</text>
</template>

index引用item.
<import src="item.wxml"/>
<template is="item" data="{{text: 'name'}}"/>

// import引用模板
// include引用整個文件

?

<include src="header.wxml"/>
<view> body </view>
<include src="foot.wxml"/>

<view> header </view>

<view> footer </view>

?

view 視圖容器組件
scroll-view 可滾動視圖區(qū)域
swiper 滑塊視圖容器組件
icon 圖標(biāo)組件
text 文本組件
progress 進度條組件
button 按鈕組件
checkbox 多項選擇器
radio 單項選擇器
form 表單組件
input 單行輸入框
textarea 多行輸入框
label 改進表單可用性
picker 滾動選擇器
slider 滑動選擇器
switch開關(guān)選擇器
navigator 頁面鏈接組件跳轉(zhuǎn)
audio 音頻組件
image 圖片組件
video 視頻組件

// 客服會話按鈕組件
contact-button
wx.request 用來請求服務(wù)器的
w.downloadFile 文件上傳與下載
WebSocket 會話用來創(chuàng)建一個會話連接
wx.chooseImage 選擇圖片
wx.previewImage 預(yù)覽圖片
wx.getImageInfo 獲取圖片信息
wx.saveFile 保存文件到本地
wx.getSavedFileList 獲取本地文件列表
wx.getSavedFileInfp 獲取本地文件信息
wx.removeSavedFile 刪除本地文件
wx.openDocument 打開文檔

// 數(shù)據(jù)緩存
wx.setStorage 異步方式將數(shù)據(jù)存儲在本地緩存
wx.setStorageSync 同步方式將數(shù)據(jù)存儲到本地緩存指定的key中

// 本地緩存數(shù)據(jù)
wx.getStorage, wx.getStorageSync, wx.getStorageInfo, wx.getStorageInfoSync

// 清除數(shù)據(jù)
wx.removeStorage 用來異步從本地緩存中移除指定的key
wx.removeStorageSync 用來同步從本地緩存中移除指定的key
wx.clearStorage() 異步清理
wx.clearStorageSync() 同步清理

// 位置信息
wx.getLocation, wx.chooseLocation, wx.openLocation, wx.createMapContext.

wx.getLocation() 可以獲取當(dāng)前位置信息
wx.chooseLocation() 打開地圖選擇位置
wx.openLocation() 微信內(nèi)置地圖查看位置

// 獲取設(shè)備
wx.getSystemInfo 用來獲取異步獲取設(shè)備的系統(tǒng)信息
wx.getSystemInfoSync 用于同步獲取系統(tǒng)信息
wx.getNetworkType 用來獲取網(wǎng)絡(luò)類型
wx.onAccelerometerChange 用來進行重力感應(yīng)
wx.onCompassChange 用來監(jiān)聽羅盤數(shù)據(jù)
wx.makePhoneCall 用來撥打電話
wx.scanCode 用來調(diào)出客戶端掃碼界面

// 交互反饋
wx.showToast 用來顯示消息提示框
wx.hideToast 隱藏消息提示框
wx.showModal 顯示模態(tài)彈窗
wx.showActionSheet 顯示操作菜單

// api
wx.login 獲取登錄憑證
wx.checkSession 檢查登錄狀態(tài)是否過期
wx.getUserInfo 獲取用戶信息

onShareAppMessage

?

// 用來設(shè)置頁面的分享信息
Page({
onShareAppMessage: function(){
  return {
   title: '自定義標(biāo)題',
   desc: '描述',
   path: 'page/user?id=123'
  }
 }
})

?

// 微信支付微信支付5個步驟:
小程序內(nèi)調(diào)用登錄接口
商戶系統(tǒng)調(diào)用支付統(tǒng)一下單
商戶系統(tǒng)調(diào)用再次簽名
商戶系統(tǒng)接收收支通知
系統(tǒng)查詢支付

微信支付用戶->微信小程序->商戶系統(tǒng)->微信后臺

// 獲取用戶信息
Page({
onLoad: function(){
  wx.getUserInfo({
   success: function(res){
    console.log(res);
    var userInfo=res.userInfo
    var nickName=userInfo.nickName
   }
  })
 }
})

?

// 校驗登錄狀態(tài)是否過期
wx.checkSession({
 success: function(){
 },
 fail: function(){
  wx.login()
  // 登錄態(tài)過期
 }
})

?

App({
 onLaunch: function(){
  wx.login({
   success: function(res) {
    if(res.code){
     wx.request({
      url: '',
      data: {
       code: res.code
      }
     })
    }else{
     console.log(res.errMsg)
    }
   }
  })
 }
})

?

// 操作菜單
// wx.showActionSheet
wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success(res) {
    console.log(res.tapIndex)
  },
  fail(res) {
    console.log(res.errMsg)
  }
})

?

// wx.showModal
// 顯示模態(tài)對話框
wx.showModal({
  title: '提示',
  content: '這是一個模態(tài)彈窗',
  success(res) {
    if (res.confirm) {
      console.log('用戶點擊確定')
    } else if (res.cancel) {
      console.log('用戶點擊取消')
    }
  }
})

?

// wx.showToast
// 顯示消息提示框
wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

setTimeout(function(){
 wx.hideToast
},2000)

?

// wx.scanCode
調(diào)起客戶端掃碼界面進行掃碼
// 允許從相機和相冊掃碼
wx.scanCode({
  success(res) {
    console.log(res)
  }
})

// 只允許從相機掃碼
wx.scanCode({
  onlyFromCamera: true,
  success(res) {
    console.log(res)
  }
})

?

// wx.makePhoneCall
// 撥打電話
wx.makePhoneCall({
  phoneNumber: '1340000' // 僅為示例，并非真實的電話號碼
})