當(dāng)前位置：首頁(yè) > IT技術(shù) > 微信平臺(tái) > 正文

全棧開發(fā)工程師微信小程序-中(中)
2021-07-29 15:17:34

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

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

?

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

開放能力

open-data
用于展示微信開放的數(shù)據(jù)

type 開放數(shù)據(jù)類型
open-gid 當(dāng) type="groupName" 時(shí)生效, 群id
lang 當(dāng) type="user*" 時(shí)生效，以哪種語(yǔ)言展示 userInfo

?

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

圖片說明

?

<open-data type="groupName" open-gid="xxxxxx"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>

?

web-view
web-view?組件是一個(gè)可以用來承載網(wǎng)頁(yè)的容器.

src webview 指向網(wǎng)頁(yè)的鏈接

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

圖片說明

?

案例:

<web-view src="https://mp.weixin.qq.com/"></web-view>

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

圖片說明

?

<script
  type="text/javascript"
  src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
></script>

?

onShareAppMessage

案例:

Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})

?

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

圖片說明

?

ad廣告

目前暫時(shí)以邀請(qǐng)制開放申請(qǐng)，請(qǐng)留意后續(xù)模板消息的通知

official-account
用戶掃碼打開小程序,在小程序內(nèi)配置公眾號(hào)關(guān)注組件,快捷關(guān)注公眾號(hào).

使用前要前往小程序后臺(tái),在“設(shè)置”->“接口設(shè)置”->“公眾號(hào)關(guān)注組件”中設(shè)置.

示例代碼：

<official-account></official-account>

原生組件

camera
canvas
input
live-player
live-pusher
map
textarea
video

// cover-view 與 cover-image

?

添加了無障礙訪問

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

圖片說明

?

// 無障礙的屬性
button
input
textarea
checkbox
switch
radio
slider
picker-view
scroll-view
progress
navigator
image
icon
view
cover-view
cover-image
map

?

javascript語(yǔ)言

var arr = "dashucoding";
var arr = 10;
var arr = true;
var arr = [2,"dashu",23];
var arr = {name:"dashu"};

var name = "dashu";
if(name === "dashu"){
this.alert("dashucoding");
}else{
this.alert("dashu");
}
// this代表當(dāng)前的頁(yè)面對(duì)象

?

事件

事件是視圖層到邏輯層的通信方式.事件分冒泡事件和非冒泡事件,冒泡事件是當(dāng)一個(gè)組件上的事件被觸發(fā)后,會(huì)向父節(jié)點(diǎn)傳遞,非冒泡事件是不會(huì)向父節(jié)點(diǎn)傳遞的.

<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>

target是觸發(fā)事件的源組件
currentTarget是事件綁定的當(dāng)前組件

bindtap, catchtouchstart
bind事件綁定不會(huì)阻止冒泡事件 向上冒泡
catch事件綁定可以阻止冒泡事件冒泡事件 向上冒泡

// 事件對(duì)象可以攜帶額外信息，如 id, dataset, touches

Page({
  tapName(event) {
    console.log(event)
  }
})

changedTouches
detail 自定義事件所攜帶的數(shù)據(jù)

?

touchstart 手指觸摸動(dòng)作開始
touchmove 手指觸摸后移動(dòng)
touchcancel 手指觸摸動(dòng)作被打斷
touchend 手指觸摸動(dòng)作結(jié)束
tap 手指觸摸后馬上離開

?

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

圖片說明

?

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">inner view</view>
  </view>
</view>

?

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

圖片說明

?

<view
  id="outer"
  bind:touchstart="handleTap1"
  capture-bind:touchstart="handleTap2"
>
  outer view
  <view
    id="inner"
    bind:touchstart="handleTap3"
    capture-bind:touchstart="handleTap4"
  >
    inner view
  </view>
</view>

?

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

圖片說明

?

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
  DataSet Test
</view>

Page({
  bindViewTap(event) {
    event.currentTarget.dataset.alphaBeta === 1 // - 會(huì)轉(zhuǎn)為駝峰寫法
    event.currentTarget.dataset.alphabeta === 2 // 大寫會(huì)轉(zhuǎn)為小寫
  }
})

?

事件:
target是觸發(fā)事件的源組件,currentTarget是事件綁定的當(dāng)前組件.key以bind或catch開頭,常見:bindtap,catchtouchstart.bind事件綁定不會(huì)阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡.

?

type: 事件類型
timeStamp: 事件生成時(shí)的時(shí)間截
target: 觸發(fā)事件的組件的一些屬性值集合
currentTarget: 當(dāng)前組件的一些屬性值集合
TouchEvent:
touches:當(dāng)前停留在屏幕中的觸摸點(diǎn)信息
changedTouches:當(dāng)前變化的觸摸點(diǎn)信息

?

三元操作符

let arr = x > 20 ? "dashu" : "dashucoding"

操作符

if(var !== null || var !== undefined || var !== ""){
}

?

<wxs module="util">
  var sub = function(val) {
    return val.substring(0, 10)
  }
  var sub1 = function(val) {
    return val.substring(0, 7)
  }
  module.exports.sub1 = sub1;
  module.exports.sub = sub;
</wxs>

<wxs module="util">
  var sub = function(val) {
    return val.substring(0, 10)
  }
  var subtxst = function(index) {
    if (index == "1") {
      return index = "病假"
    } else {
      return index = "事假"
    }
  }
  module.exports.sub = sub;
  module.exports.subtxst = subtxst;
</wxs>

{{util.subtxst(item.leaveType)}}

?

rpx單位,是根據(jù)屏幕寬度進(jìn)行自適應(yīng)調(diào)整,規(guī)定的屏幕寬度為750rpx,在官方iphone6上的屏幕寬度是375px,共有750個(gè)物理像素.

?

750rpx=375px=750物理像素
1rpx=0.5px=1物理像素

?

微信小程序基礎(chǔ)

調(diào)式功能,在小程序有調(diào)式工具:

Console, Sources, Network, Storage, AppData, wxml

小程序調(diào)式三大功能區(qū):
模擬器,調(diào)式工具,小程序操作區(qū)

模擬器可以對(duì)小程序在客戶端一些真實(shí)的表現(xiàn),可以呈現(xiàn)出顯示狀態(tài).小程序中具有自定義編譯,可以用來在開發(fā)者調(diào)式時(shí)進(jìn)入不同的場(chǎng)景.

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

圖片說明

?

有時(shí)候上傳會(huì)有readme和.gitignore文件不會(huì)被打包上傳,目的是為了優(yōu)化大小.

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

如果勾了?ES6?轉(zhuǎn)?ES5或代碼壓縮,目的是為了優(yōu)化編譯的速度,對(duì)于體積過大的文件,工具就會(huì)跳過這些文件.

調(diào)式工具7大模塊:

Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

注：uploadFile?和?downloadFile?暫時(shí)不支持在?Network?Panel?中查看

build: 編譯小程序
preview: 預(yù)覽
upload: 上傳代碼
openVendor: 打開基礎(chǔ)庫(kù)所在目錄
openToolsLog: 打開工具日志目錄
checkProxy(url): 檢查指定url

?

自定義數(shù)據(jù)上報(bào)

查看,點(diǎn)擊菜單欄中的 “工具 - 自定義分析” .

Storage可以用來顯示當(dāng)前項(xiàng)目的wx.setStorage或wx.setStorageSync后;
AppData可以用于當(dāng)前項(xiàng)目,顯示數(shù)據(jù)情況;
Console可以用來顯示小程序的輸出信息;
Sources可以用來顯示當(dāng)前項(xiàng)目的腳本文件;
Network可以用來實(shí)現(xiàn)發(fā)送的請(qǐng)求和調(diào)用文件的信息;
Wxml可以用來查看真實(shí)的頁(yè)面結(jié)構(gòu)和屬性.

框架

小程序的框架有:

  1. 框架全局配置文件

  2. 工具類文件

  3. 框架頁(yè)面文件

框架全局配置文件

一個(gè)小程序框架全局配置文件有:

app.js,?app.json,?app.wxss, 三個(gè)文件組成,全局文件都是在項(xiàng)目的根目錄.

// app.js
App({

  /**
   * 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次）
   */
  // 生命周期函數(shù)
  onLaunch: function() {
    // 獲取小程序更新機(jī)制兼容
    if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      updateManager.onCheckForUpdate(function(res) {
        // 請(qǐng)求完新版本信息的回調(diào)
        if (res.hasUpdate) {
          updateManager.onUpdateReady(function() {
            wx.showModal({
              title: '更新提示',
              content: '新版本已經(jīng)準(zhǔn)備好，是否重啟應(yīng)用？',
              success: function(res) {
                if (res.confirm) {
                  // 新的版本已經(jīng)下載好，調(diào)用 applyUpdate 應(yīng)用新版本并重啟
                  updateManager.applyUpdate()
                }
              }
            })
          })
          updateManager.onUpdateFailed(function() {
            // 新的版本下載失敗
            wx.showModal({
              title: '已經(jīng)有新版本了喲~',
              content: '新版本已經(jīng)上線啦~，請(qǐng)您刪除當(dāng)前小程序，重新搜索打開喲~',
            })
          })
        }
      })
    } else {
      // 如果希望用戶在最新版本的客戶端上體驗(yàn)?zāi)男〕绦颍梢赃@樣子提示
      wx.showModal({
        title: '提示',
        content: '當(dāng)前微信版本過低，無法使用該功能，請(qǐng)升級(jí)到最新微信版本后重試。'
      })
    }
  },

  /**
   * 當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow
   */
  onShow: function(options) {

  },

  /**
   * 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide
   */
  onHide: function() {

  },

  /**
   * 當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息
   */
  onError: function(msg) {

  }
})

?

// 定義全局?jǐn)?shù)據(jù)
globalData: {
userInfo: null
}

?

// app.json ：
{
  "pages": ["pages/index/index", "pages/logs/index"],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁(yè)"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

// 配置頁(yè)面路徑
// 配置窗口表現(xiàn)
// 配置標(biāo)簽導(dǎo)航
// 配置網(wǎng)絡(luò)超時(shí)
// 配置debug模式

?

頁(yè)面配置項(xiàng)列表

?

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

navigationBarBackgroundColor 導(dǎo)航欄背景顏色
navigationBarTextStyle 導(dǎo)航欄標(biāo)題顏色
navigationBarTitleText 導(dǎo)航欄標(biāo)題文字內(nèi)容
navigationStyle 導(dǎo)航欄樣式
backgroundColor 窗口的背景色
backgroundTextStyle 下拉 loading 的樣式，僅支持 dark / light
enablePullDownRefresh 是否全局開啟下拉刷新
onReachBottomDistance 頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離
disableScroll 設(shè)置為 true 則頁(yè)面整體不能上下滾動(dòng)
disableSwipeBack 禁止頁(yè)面右滑手勢(shì)返回

?

小程序中有工具類文件:?utils, 通過module.exports進(jìn)行注冊(cè)使用.

?

App({
 onLaunch: function() {
 },
 onShow: function() {
 },
 onHide: function() {
 },
 onError: function() {
 },
 globalData: 'dashucoding'
})

?

本文摘自 ：https://blog.51cto.com/u

開通會(huì)員，享受整站包年服務(wù)立即開通 >
推薦內(nèi)容