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

?

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

微信小程序視圖層

wxml用于描述頁面的結構,wxss用于描述頁面的樣式,組件用于視圖的基本組成單元.

// 綁定數據
index.wxml
<view> {{message}} <view>

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

?

// 組件屬性
// data中的數據綁定到微信小程序組件上
<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指定數組當前元素的變量名
// wx:for-index指定數組當前項目下標的變量名

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

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

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

?

// wx:key指定唯一標識符
動態(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引用目標文件
<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 圖標組件
text 文本組件
progress 進度條組件
button 按鈕組件
checkbox 多項選擇器
radio 單項選擇器
form 表單組件
input 單行輸入框
textarea 多行輸入框
label 改進表單可用性
picker 滾動選擇器
slider 滑動選擇器
switch開關選擇器
navigator 頁面鏈接組件跳轉
audio 音頻組件
image 圖片組件
video 視頻組件

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

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

// 本地緩存數據
wx.getStorage, wx.getStorageSync, wx.getStorageInfo, wx.getStorageInfoSync

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

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

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

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

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

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

onShareAppMessage

?

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

?

// 微信支付微信支付5個步驟:
小程序內調用登錄接口
商戶系統(tǒng)調用支付統(tǒng)一下單
商戶系統(tǒng)調用再次簽名
商戶系統(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
調起客戶端掃碼界面進行掃碼
// 允許從相機和相冊掃碼
wx.scanCode({
  success(res) {
    console.log(res)
  }
})

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

?

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