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

開放能力

open-data
用於展示微信開放的資料

type 開放資料型別
open-gid 當 type="groupName" 時生效, 群id
lang 當 type="user*" 時生效，以哪種語言展示 userInfo

<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 元件是一個可以用來承載網頁的容器.

src webview 指向網頁的連結

案例:

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

<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)
  }
})
 

ad廣告

目前暫時以邀請制開放申請，請留意後續模板訊息的通知

official-account
使用者掃碼開啟小程式,在小程式內配置公眾號關注元件,快捷關注公眾號.

使用前要前往小程式後臺,在“設定”->“介面設定”->“公眾號關注元件”中設定.

示例程式碼：

<official-account></official-account>

原生元件

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

// cover-view 與 cover-image

添加了無障礙訪問

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

javascript語言

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代表當前的頁面物件

事件

事件是檢視層到邏輯層的通訊方式.事件分冒泡事件和非冒泡事件,冒泡事件是當一個元件上的事件被觸發後,會向父節點傳遞,非冒泡事件是不會向父節點傳遞的.

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

target是觸發事件的源元件
currentTarget是事件繫結的當前元件

bindtap, catchtouchstart
bind事件繫結不會阻止冒泡事件 向上冒泡
catch事件繫結可以阻止冒泡事件冒泡事件 向上冒泡

// 事件物件可以攜帶額外資訊，如 id, dataset, touches

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

changedTouches
detail 自定義事件所攜帶的資料

touchstart 手指觸控動作開始
touchmove 手指觸控後移動
touchcancel 手指觸控動作被打斷
touchend 手指觸控動作結束
tap 手指觸控後馬上離開

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

<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>

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

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

事件:
target是觸發事件的源元件,currentTarget是事件繫結的當前元件.key以bind或catch開頭,常見:bindtap,catchtouchstart.bind事件繫結不會阻止冒泡事件向上冒泡,catch事件繫結可以阻止冒泡事件向上冒泡.

type: 事件型別
timeStamp: 事件生成時的時間截
target: 觸發事件的元件的一些屬性值集合
currentTarget: 當前元件的一些屬性值集合
TouchEvent:
touches:當前停留在螢幕中的觸控點資訊
changedTouches:當前變化的觸控點資訊

三元操作符

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單位,是根據螢幕寬度進行自適應調整,規定的螢幕寬度為750rpx,在官方iphone6上的螢幕寬度是375px,共有750個物理畫素.

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

微信小程式基礎

調式功能,在小程式有調式工具:

Console, Sources, Network, Storage, AppData, wxml

小程式調式三大功能區:
模擬器,調式工具,小程式操作區

模擬器可以對小程式在客戶端一些真實的表現,可以呈現出顯示狀態.小程式中具有自定義編譯,可以用來在開發者調式時進入不同的場景.

有時候上傳會有readme和.gitignore檔案不會被打包上傳,目的是為了優化大小.

如果勾了 ES6 轉 ES5或程式碼壓縮,目的是為了優化編譯的速度,對於體積過大的檔案,工具就會跳過這些檔案.

調式工具7大模組:

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

注：uploadFile 和 downloadFile 暫時不支援在 Network Panel 中檢視

build: 編譯小程式
preview: 預覽
upload: 上傳程式碼
openVendor: 開啟基礎庫所在目錄
openToolsLog: 開啟工具日誌目錄
checkProxy(url): 檢查指定url

自定義資料上報

檢視,點選選單欄中的 “工具 - 自定義分析” .

Storage可以用來顯示當前專案的wx.setStorage或wx.setStorageSync後;
AppData可以用於當前專案,顯示資料情況;
Console可以用來顯示小程式的輸出資訊;
Sources可以用來顯示當前專案的指令碼檔案;
Network可以用來實現傳送的請求和呼叫檔案的資訊;
Wxml可以用來檢視真實的頁面結構和屬性.

框架

小程式的框架有:

1. 框架全域性配置檔案
2. 工具類檔案
3. 框架頁面檔案

框架全域性配置檔案

一個小程式框架全域性配置檔案有:

app.js, app.json, app.wxss, 三個檔案組成,全域性檔案都是在專案的根目錄.

// app.js
App({

  /**
   * 當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）
   */
  // 生命週期函式
  onLaunch: function() {
    // 獲取小程式更新機制相容
    if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      updateManager.onCheckForUpdate(function(res) {
        // 請求完新版本資訊的回撥
        if (res.hasUpdate) {
          updateManager.onUpdateReady(function() {
            wx.showModal({
              title: '更新提示',
              content: '新版本已經準備好，是否重啟應用？',
              success: function(res) {
                if (res.confirm) {
                  // 新的版本已經下載好，呼叫 applyUpdate 應用新版本並重啟
                  updateManager.applyUpdate()
                }
              }
            })
          })
          updateManager.onUpdateFailed(function() {
            // 新的版本下載失敗
            wx.showModal({
              title: '已經有新版本了喲~',
              content: '新版本已經上線啦~，請您刪除當前小程式，重新搜尋開啟喲~',
            })
          })
        }
      })
    } else {
      // 如果希望使用者在最新版本的客戶端上體驗您的小程式，可以這樣子提示
      wx.showModal({
        title: '提示',
        content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本後重試。'
      })
    }
  },

  /**
   * 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
   */
  onShow: function(options) {

  },

  /**
   * 當小程式從前臺進入後臺，會觸發 onHide
   */
  onHide: function() {

  },

  /**
   * 當小程式發生指令碼錯誤，或者 api 呼叫失敗時，會觸發 onError 並帶上錯誤資訊
   */
  onError: function(msg) {

  }
})

// 定義全域性資料
globalData: {
 userInfo: null
}

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

// 配置頁面路徑
// 配置視窗表現
// 配置標籤導航
// 配置網路超時
// 配置debug模式

頁面配置項列表

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

navigationBarBackgroundColor 導航欄背景顏色
navigationBarTextStyle 導航欄標題顏色
navigationBarTitleText 導航欄標題文字內容
navigationStyle 導航欄樣式
backgroundColor 視窗的背景色
backgroundTextStyle 下拉 loading 的樣式，僅支援 dark / light
enablePullDownRefresh 是否全域性開啟下拉重新整理
onReachBottomDistance 頁面上拉觸底事件觸發時距頁面底部距離
disableScroll 設定為 true 則頁面整體不能上下滾動
disableSwipeBack 禁止頁面右滑手勢返回

小程式中有工具類檔案: utils, 通過module.exports進行註冊使用.

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

如果看了覺得不錯

點贊！轉發！

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

結語

• 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
• 小禮物走一走 or 點贊