微信公衆號及小程序

時間 2019-12-13

標籤微信公衆號程序简体版

原文原文鏈接

微信小程序

一、簡單描述下微信小程序的相關文件類型？html

主要有四個文件類型,以下
    ①.json 後綴的 JSON 配置文件
    ②.wxml 後綴的 WXML 模板文件
    ③.wxss 後綴的 WXSS 樣式文件
    ④.js 後綴的 JS 腳本邏輯文件
WXML （WeiXin Markup Language）
    是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。
    內部主要是微信本身定義的一套組件。
WXSS (WeiXin Style Sheets)
    是一套樣式語言，用於描述 WXML 的組件樣式，
json
    小程序設置，如頁面註冊，頁面標題及tabBar。
js
    邏輯處理，網絡請求
    
app.json

必需要有這個文件，若是沒有這個文件，項目沒法運行，由於微信框架把這個做爲配置文件入口，整個小程序的全局配置。
包括小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab，以及小程序的window背景色，配置導航條樣式，配置默認標題。前端

二、請談談wxml與標準的html的異同？vue

①都是用來描述頁面的結構；都由標籤、屬性等構成；
②標籤名字不同，且小程序標籤更少，單一標籤更多；
③多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式
④WXML僅能在微信小程序開發者工具中預覽，而HTML能夠在瀏覽器內預覽
⑤組件封裝不一樣， WXML對組件進行了從新封裝，
⑥沒有DOM樹和window對象，小程序中沒法使用window對象和document對象。

三、請談談WXSS和CSS的異同？git

①都是用來描述頁面的樣子；
②WXSS 具備 CSS 大部分的特性，僅支持部分 CSS 選擇器，可是沒有明確的官方說明。
③WXSS新增了尺寸單位，WXSS 在底層支持新的尺寸單位 rpx；
④WXSS 提供全局樣式與局部樣式。

四、怎麼封裝微信小程序的數據請求的？web

①在根目錄下建立utils目錄再建立api.js文件；
②在api.js 封裝基礎的get, post 和 put， upload等請求方法，設置請求體，帶上token和異常處理等；
③在api.js中設置對應的方法調用上面封裝好的請求方法並導出；固然可使用兩個文件，在同一個文件顯示更加直觀。
④在具體的頁面中導入；

ES5-module.exports/require
ES6語法-export/import算法

五、小程序頁面間有哪些傳遞數據的方法？數據庫

①使用全局變量實現數據傳遞 app.js定義globalData對應的全局變量
②頁面跳轉或重定向時，使用url帶參數傳遞數據
wx.navigateTo({
  url: 'some/some?id=' + event.target.id,
})
onLoad: function (options) {
  console.log(options)
},
③使用組件模板 template傳遞參數
<component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}"></component-tag-name>
④使用緩存傳遞參數
wx.setStorage({
  key: 'userInfo',
  data: res.userInfo
})
⑤使用數據庫 -- 發送請求

六、小程序的雙向綁定和vue的異同？json

大致相同，小程序直接this.data的屬性是不能夠同步到視圖的，必須調用this.setData()方法
擴展--語法異同, 
①vue屬性值不須要大括號，微信小程序屬性值須要大括號；vue使用 「-」，微信小程序使用 「:」
②v-if、v-else-if、v-else == wx:if、wx:elif、wx:else
③v-for="(itemNameAnyway, key, index) in arr" v-bind:key="item.id"//:key="item.id"
wx:for="{{items}}"  wx:key="itemName" wx:for-index="idx" wx:for-item="itemName"
wx:key值在for循環的 array 中 item 的某個 property，該 property 的值須要是列表中惟一的字符串或數字，且不能動態改變
使用 wx:for-item 指定數組當前元素的變量名，使用 wx:for-index 指定數組當前下標的變量名
④事件綁定
 v-bind、@
 bindtap、catchtap...

七、小程序的生命週期函數？小程序

onLoad() 頁面加載時觸發，只會調用一次，獲取當前頁面路徑中的參數。
onShow() 頁面顯示/切入前臺時觸發，通常用來發送數據請求；
onReady() 頁面初次渲染完成時觸發, 只會調用一次，表明頁面已可和視圖層進行交互。
onHide() 頁面隱藏/切入後臺時觸發, 如底部 tab 切換到其餘頁面或小程序切入後臺等。
onUnload() 頁面卸載時觸發，如redirectTo或navigateBack到其餘頁面時。

九、使用過哪些方法，來提升微信小程序的應用速度微信小程序

①減小默認data的大小
②組件化方案
③提升頁面加載速度

詳情連接

八、微信小程序原理？

①本質就是一個單頁應用，全部的頁面渲染和事件處理，都在一個頁面內進行，同時又能夠經過微信客戶端調用原生的各類接口；
②是數據驅動的架構模式，UI和數據是分離的，頁面更新須要更改數據來實現；
③從技術講和現有的前端開發差很少，採用JavaScript、WXML、WXSS三種技術進行開發；
    (HTML結構層、CSS表示層、JS行爲層。)
④功能可分爲webview和appService兩個部分；webview用來展示UI，appService有來處理業務邏輯、數據及接口調用；

十、小程序與原生App哪一個好？

①小程序擁有公衆號的低開發成本、獲客成本低以及無需下載，經過搜索和掃一掃就能夠打開。
②頁面大小不能超過1M。不能打開超過5個層級的頁面。
③樣式單一。小程序的部分組件已是成型的了，樣式不能夠修改。
④依託於微信。

十一、微信小程序與H5的區別？

①運行環境的不一樣--
    HTML5運行環境是瀏覽器；
    微信小程序的運行環境是微信開發團隊基於瀏覽器內核徹底重構的一個內置解析器，配合本身定義的開發語言標準，
②開發成本的不一樣--只在微信中運行，因此不用再去顧慮瀏覽器兼容性
③獲取系統級權限的不一樣--系統級權限均可以和微信小程序無縫銜接

微信小程序
微信小程序支付API

wx.requestPayment({
    'timeStamp': '', // 時間戳
    'nonceStr': '', // 隨機字符串
    'package': '', // 數據包
    'signType': 'MD5', // 簽名類型，默認爲MD5，
    'paySign': '', // 「簽名算法」說明
    'success':function(res){},
    'fail':function(res){},
    'complete':function(res){}
})

paySign = MD5(appId=wxd678efh567hg6787&
nonceStr=5K8264ILTKCH16CQ2502SI8ZNMTM67VS&
package=prepay_id=wx2017033010242291fcfe0db70013231072&
signType=MD5&
timeStamp=1490840662&
key=qazwsxedcrfvtgbyhnujmikolp111111) = 22D9B4E54AB1950F51E0649E8810ACD6
微信小程序-掃碼
wx.scanCode
微信小程序-從本地相冊選擇圖片或使用相機拍照

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success(res) {
    // tempFilePath能夠做爲img標籤的src屬性顯示圖片
    const tempFilePaths = res.tempFilePaths
  }
})

微信小程序-上傳

wx.chooseImage({
  success(res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', // 僅爲示例，非真實的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        user: 'test'
      },
      success(res) {
        const data = res.data
        // do something
      }
    })
  }
})

微信小程序開發文檔

微信公衆號

微信JS-SDK說明文檔
 微信網頁受權-獲取用戶基本信息

一、引導用戶進入受權頁面贊成受權，獲取code
二、經過code換取網頁受權access_token（與基礎支持中的access_token不一樣）
三、若是須要，開發者能夠刷新網頁受權access_token，避免過時
四、經過網頁受權access_token和openid獲取用戶基本信息

JS-SDK使用步驟

①綁定域名
②引入JS文件
    [js1-支持https][9]
    [js2-支持https][10]
③經過config接口注入權限驗證配置
wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，須要使用的JS接口列表
});

調起微信掃一掃接口

wx.scanQRCode({
    needResult: 0, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
    scanType: ["qrCode","barCode"], // 能夠指定掃二維碼仍是一維碼，默認兩者都有
    success: function (res) {
        var result = res.resultStr; // 當needResult 爲 1 時，掃碼返回的結果
    }
});

發起一個微信支付請求

wx.chooseWXPay({
    timestamp: 0, // 支付簽名時間戳，注意微信jssdk中的全部使用timestamp字段均爲小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
    nonceStr: '', // 支付簽名隨機串，不長於 32 位
    package: '', // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=\*\*\*）
    signType: '', // 簽名方式，默認爲'SHA1'，使用新版支付需傳入'MD5'
    paySign: '', // 支付簽名
    success: function (res) {
        // 支付成功後的回調函數
    }
});

微信支付開發文檔
拍照或從手機相冊中選圖

wx.chooseImage({
    count: 1, // 默認9
    sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
    sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
    success: function (res) {
        var localIds = res.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
    }
});

預覽圖片接口

wx.previewImage({
    current: '', // 當前顯示圖片的http連接
    urls: [] // 須要預覽的圖片http連接列表
});

上傳圖片接口

wx.uploadImage({
    localId: '', // 須要上傳的圖片的本地ID，由chooseImage接口得到
    isShowProgressTips: 1, // 默認爲1，顯示進度提示
    success: function (res) {
        var serverId = res.serverId; // 返回圖片的服務器端ID
    }
});

使用微信內置地圖查看位置接口

wx.openLocation({
  latitude: 0, // 緯度，浮點數，範圍爲90 ~ -90
  longitude: 0, // 經度，浮點數，範圍爲180 ~ -180。
  name: '', // 位置名
  address: '', // 地址詳情說明
  scale: 1, // 地圖縮放級別,整形值,範圍從1~28。默認爲最大
  infoUrl: '' // 在查看位置界面底部顯示的超連接,可點擊跳轉
});

獲取地理位置接口

wx.getLocation({
    type: 'wgs84', // 默認爲wgs84的gps座標，若是要返回直接給openLocation用的火星座標，可傳入'gcj02'
    success: function (res) {
        var latitude = res.latitude; // 緯度，浮點數，範圍爲90 ~ -90
        var longitude = res.longitude; // 經度，浮點數，範圍爲180 ~ -180。
        var speed = res.speed; // 速度，以米/每秒計
        var accuracy = res.accuracy; // 位置精度
    }
});

自定義「分享到朋友圈」及「分享到QQ空間」按鈕的分享內容（1.4.0）

wx.ready(function () {      
    //需在用戶可能點擊分享按鈕前就先調用
    wx.updateTimelineShareData({ 
        title: '', // 分享標題
        link: '', // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
        imgUrl: '', // 分享圖標
        success: function () {
          // 設置成功
        }
    })
});

判斷當前客戶端版本是否支持指定JS接口

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 須要檢測的JS接口列表，全部JS接口列表見附錄2,
    success: function(res) {
    // 以鍵值對的形式返回，可用的api值true，不可用爲false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

④
⑤
⑥
①
②
③
④
⑤
⑥

1
2
3其餘經典技術點正在收集