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

?

全棧開發(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>
// 是否進(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
// 共用代碼,一次編寫多次使用
<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開關(guān)選擇器
navigator 頁面鏈接組件跳轉(zhuǎn)
audio 音頻組件
image 圖片組件
video 視頻組件

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

// 數(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 用來異步從本地緩存中移除指定的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 用來進(jìn)行重力感應(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個(gè)步驟:
小程序內(nèi)調(diào)用登錄接口
商戶系統(tǒng)調(diào)用支付統(tǒng)一下單
商戶系統(tǒng)調(diào)用再次簽名
商戶系統(tǒng)接收收支通知
系統(tǒng)查詢支付

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

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

?

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

?

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

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

?

// wx.scanCode
調(diào)起客戶端掃碼界面進(jìn)行掃碼
// 允許從相機(jī)和相冊掃碼
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)碼
})