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

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

微信小程序視圖層

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>

一個包含多個節點的結構塊block

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

// wx:key指定惟一標識符
動態改變或有新列表的加入

<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 可滾動視圖區域
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 會話用來建立一個會話鏈接
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 用來獲取異步獲取設備的系統信息
wx.getSystemInfoSync 用於同步獲取系統信息
wx.getNetworkType 用來獲取網絡類型
wx.onAccelerometerChange 用來進行重力感應
wx.onCompassChange 用來監聽羅盤數據
wx.makePhoneCall 用來撥打電話
wx.scanCode 用來調出客戶端掃碼界面

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

// api
wx.login 獲取登陸憑證
wx.checkSession 檢查登陸狀態是否過時
wx.getUserInfo 獲取用戶信息

onShareAppMessage

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

// 微信支付
微信支付5個步驟:
小程序內調用登陸接口
商戶系統調用支付統一下單
商戶系統調用再次簽名
商戶系統接收收支通知
系統查詢支付

微信支付用戶->微信小程序->商戶系統->微信後臺

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

// 校驗登陸狀態是否過時
wx.checkSession({
 success: function(){
 },
 fail: function(){
  wx.login()
  // 登陸態過時
 }
})

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
// 顯示模態對話框
wx.showModal({
  title: '提示',
  content: '這是一個模態彈窗',
  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' // 僅爲示例，並不是真實的電話號碼
})

若是看了以爲不錯

點贊！轉發！

達叔小生：日後餘生，惟獨有你
You and me, we are family !
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動而且善於溝通
簡書博客： 達叔小生
https://www.jianshu.com/u/c785ece603d1

結語

• 下面我將繼續對 其餘知識 深刻講解 ，有興趣能夠繼續關注
• 小禮物走一走 or 點贊