全棧開(kāi)發(fā)工程師微信小程序-中(下)
2021-07-29 14:53:13

?

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

微信小程序視圖層

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

// 綁定數(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>
// 是否進(jìn)行渲染
<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)前項(xiàng)目下標(biāo)的變量名

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

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

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

?

// wx:key指定唯一標(biāo)識(shí)符
動(dòng)態(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
// 共用代碼,一次編寫(xiě)多次使用
<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引用整個(gè)文件

?

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

<view> header </view>

<view> footer </view>

?

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

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

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

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

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

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

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

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

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

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

onShareAppMessage

?

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

?

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

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

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

?

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

?

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)對(duì)話框
wx.showModal({
  title: '提示',
  content: '這是一個(gè)模態(tài)彈窗',
  success(res) {
    if (res.confirm) {
      console.log('用戶(hù)點(diǎn)擊確定')
    } else if (res.cancel) {
      console.log('用戶(hù)點(diǎn)擊取消')
    }
  }
})

?

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

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

?

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

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

?

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