2. 程式人生 > >移動開發之【微信小程式】的原理與許可權問題以及相關的簡易教程

移動開發之【微信小程式】的原理與許可權問題以及相關的簡易教程

阿新 • • 發佈：2019-02-16 
 這幾天圈子裡到處都在傳播著這樣一個東西，微信公眾平臺提供了一種新的開放能力，開發者可以快速開發一個小程式，取名曰：微信公眾平臺-小程式
       據說取代移動開發安卓和蘋果，那這個東東究竟是幹嗎用的？但很多人覺得是網頁版應用。

有的人很雞凍，但是……最後文章會提及具體的許可權開放問題，所以，還是保持一顆冷靜的❤比較好。

那我們先來看看元件和API開放了哪些服務：


  • 檢視容器：檢視(View)、滾動檢視、Swiper

  • 基礎內容：圖示、文字、進度條

  • 表單元件：按鈕、表單等等

  • 操作反饋

  • 導航

  • 媒體組建：音訊、圖片、視訊。

  • 地圖

  • 畫布

  • 檔案操作能力

  • 網路：上傳下載能力、WebSocket

  • 資料：資料快取能力

  • 位置：獲取位置、檢視位置

  • 裝置：網路狀態、系統資訊、重力感應、羅盤

  • 介面：設定導航條、導航、動畫、繪圖等等

  • 開放介面：登入，包括簽名加密，使用者資訊、微信支付、模板訊息

    • 不過還沒看到具體的文件，目前只能瞭解到這些。

    題外：其實可以理解為微信版的AppStore， 個人感覺小應用的技術是從 JS-SDK 而來，有的人調侃是和APPSTORE結了仇。

    提及：估計很多人已經看了Vux，但Vux並非微信應用號小程式的專案，但其實是WeUI的UI庫。

    微信小程式 —— 簡易教程

    1. 獲取微信小程式的AppID

      首先，我們需要擁有一個帳號，如果你能看到該文件，我們應當已經邀請併為你建立好一個帳號。注意不可直接使用服務號或訂閱號的AppID。 利用提供的帳號，登入

    https://mp.weixin.qq.com ，就可以在網站的“設定”-“開發者設定”中，檢視到微信小程式的AppID了。

      如果沒看懂的可以參考：微信接入指南。

    注意：如果我們不是用註冊時繫結的管理員微訊號，在手機上體驗該小程式。那麼我們還需要操作“繫結開發者”。即在“使用者身份”-“開發者”模組，繫結上需要體驗該小程式的微訊號。本教程預設註冊帳號、體驗都是使用管理員微訊號。

    2. 建立專案

    ​ 我們需要通過開發者工具，來完成小程式建立和程式碼編輯。

    ​ 開發者工具安裝完成後，開啟並使用微信掃碼登入。選擇建立“專案”，填入上文獲取到的AppID，設定一個本地專案的名稱（非小程式名稱），比如“我的第一個專案”，並選擇一個本地的資料夾作為程式碼儲存的目錄，點選“新建專案”就可以了。

    ​ 為方便初學者瞭解微信小程式的基本程式碼結構，在建立過程中，如果選擇的本地資料夾是個空資料夾，開發者工具會提示，是否需要建立一個quick start專案。選擇“是”，開發者工具會幫助我們在開發目錄裡生成一個簡單的demo。

    ​ 專案建立成功後，我們就可以點選該專案，進入並看到完整的開發者工具介面，點選左側導航，在“編輯”裡可以檢視和編輯我們的程式碼，在“除錯”裡可以測試程式碼並模擬小程式在微信客戶端效果，在“專案”裡可以傳送到手機裡預覽實際效果。

    3. 編寫程式碼

    建立小程式例項

    ​ 點選開發者工具左側導航的“編輯”，我們可以看到這個專案，已經初始化幷包含了一些簡單的程式碼檔案。最關鍵也是必不可少的，是app.js、app.json、app.wxss這三個。其中，.js字尾的是指令碼檔案，.json字尾的檔案是配置檔案，.wxss字尾的是樣式表文件。微信小程式會讀取這些檔案，並生成小程式例項。

    ​ 下面我們簡單瞭解這三個檔案的功能，方便修改以及從頭開發自己的微信小程式。

    ​ app.js是小程式的指令碼程式碼。我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。呼叫MINA提供的豐富的API，如本例的同步儲存及同步讀取本地資料。想了解更多可用API，可參考API文件

    //app.js
App({
  onLaunch: function () {
    //呼叫API從本地快取中獲取資料
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //呼叫登入介面
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

    ​ app.json是對整個小程式的全域性配置。我們可以在這個檔案中配置小程式是由哪些頁面組成，配置小程式的視窗背景色，配置導航條樣式，配置預設標題。注意該檔案不可新增任何註釋。更多可配置項可參考配置詳解

    {
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

    ​ app.wxss是整個小程式的公共樣式表。我們可以在頁面元件的class屬性上直接使用app.wxss中宣告的樣式規則。

    /**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

    建立頁面

    ​ 在這個教程裡，我們有兩個頁面，index頁面和logs頁面，即歡迎頁和小程式啟動日誌的展示頁，他們都在pages目錄下。微信小程式中的每一個頁面的【路徑+頁面名】都需要寫在app.json的pages中，且pages中的第一個頁面是小程式的首頁。

    ​ 每一個小程式頁面是由同路徑下同名的四個不同字尾檔案的組成，如：index.js、index.wxml、index.wxss、index.json。.js字尾的檔案是指令碼檔案，.json字尾的檔案是配置檔案，.wxss字尾的是樣式表文件，.wxml字尾的檔案是頁面結構檔案。

    ​ index.wxml是頁面的結構檔案：

    <!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

    ​ index.js是頁面的指令碼檔案，在這個檔案中我們可以監聽並處理頁面的生命週期函式、獲取小程式例項，宣告並處理資料，響應頁面互動事件等。

    //index.js
//獲取應用例項
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件處理函式
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //呼叫應用例項的方法獲取全域性資料
    app.getUserInfo(function(userInfo){
      //更新資料
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

    ​ index.wxss是頁面的樣式表：

    /**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

    ​ 頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋app.wxss中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構檔案中直接使用app.wxss中指定的樣式規則。

    ​ index.json是頁面的配置檔案：

    ​ 頁面的配置檔案是非必要的。當有頁面的配置檔案時，配置項在該頁面會覆蓋app.json的window中相同的配置項。如果沒有指定的頁面配置檔案，則在該頁面直接使用app.json中的預設配置。

    ​ logs的頁面結構

    <!--logs.wxml-->
<view 
            
      
    
           
    
              
              
    
            
    
            
    相關推薦
    
			   
            
            
            
 

    

    
    
    
    移動開發之【微信小程式】的原理與許可權問題以及相關的簡易教程
    
     
     
                 這幾天圈子裡到處都在傳播著這樣一個東西，微信公眾平臺提供了一種新的開放能力，開發者可以快速開發一個小程式，取名曰：微信公眾平臺-小程式
       據說取代移動開發安卓和蘋果，那這個東東究竟是幹嗎用的？但很多人覺得是網頁版應用。有的人很雞凍，但是……最後文章會提及具體的許 
    

    
  
 

    

    
    
    
    【微信小程式】NavigateTo與redirectTo的區別
    
     
     
                navigateTo()

導航到另一個頁面，會將當前的頁面隱藏起來，使頁面進入hide狀態，並不會關閉可以通過返回按鈕回到當前的頁面



redirectTo()

redirectTo()會使當前介面進入unload狀態，即關閉該頁面，將無法回到當前頁面。

      
    

    
  
 

    

    
    
    
    【微信小程式】開發實戰 之 「檢視層」WXML & WXSS 全解析
    
     
     在《微信小程式開發實戰 之 「配置項」與「邏輯層」》中我們詳細闡述了小程式開發的程式和頁面各配置項與邏輯層的基礎知識。下面我們繼續解析小程式開發框架中的「檢視層」部分。學習完這兩篇文章的基礎知識，動手開發一個簡單的小程式應用已經不成問題了。
檢視層
框架中檢視層以給定的樣式展現資料並反饋事件給邏輯層。
 
    

    
  
 

    

    
    
    
    【微信小程式】在微信開發工具上七牛雲的圖片可以看到，但是在真機上看不到的原因解決
    
     
     在開發微信小程式過程中，在微信開發者工具上，七牛雲的圖片都可以展示出來，但是在真機上，七牛雲的圖片卻展示不出來，也沒有報404找不到或者不能載入圖片的問題， 
 
 
  
  
必須保證： 
1.圖片是用image載入的； 
2.圖片的url裡面沒有中文； 
3.圖片的HTTP應為小寫的 
    

    
  
 

    

    
    
    
    【微信小程式】元件之頁面佈局
    
     
      
  
  
 小程式的flex佈局 
  
  小程式建議使用flex佈局進行排版 
  flex就是一個盒裝彈性佈局 
  flex是一個容器，所有子元素都是它的成員。 
  
 定義佈局：display：flex 
 flex 容器的屬性： 
 1、屬性flex-direction: 排列方向。有下面 
    

    
  
 

    

    
    
    
    【微信小程式】微信小程式掉進的坑之與後臺資料互動
    
     
     
								
								            
							
							
							一、與後臺的資料互動

注：服務端語言為Java. 
在進行資料互動時，用的是Servlet進行資料的獲取和回傳。 
在小程式中提交引數時需要在header寫入 
header: { 
         
    

    
  
 

    

    
    
    
    【微信小程式】：開發之前要知道的三件事
    
     
     
							
							
							前言

微信之父張小龍在年初的那次演講中曾表示：“我自己是很多年的程式設計師，我覺得我們應該為開發的團隊做一些事情”。幾個月後，微信正式推出微信應用號（即微信小程式），在網際網路中掀起了又一波熱潮。 
於是，很多人準備要開發微信的小程式，如果你真的想要開發小程式 
    

    
  
 

    

    
    
    
    【微信小程式】微信小程式開發除錯階段不校驗請求域名
    
     
     
                https://blog.csdn.net/qq_30519365/article/details/78026879使用 wx.request、wx.connectSocket、wx.uploadFile、wx.downloadFile 等方法時，都會涉及到 URL，微信小程 
    

    
  
 

    

    
    
    
    【微信小程式】小程式的開發環境的搭建
    
     
     
                

為了提高開發速度，程式碼都是在本地碼的，除錯環境也在本地，因此上線時，要對一些配置檔案進行修改。

1.修改server/config.js

首先將之前為了搭建本地開發環境，貼上的程式碼註釋掉，如下所示


其次修改mysql配置，將pass該為小程式的appid，因為 
    

    
  
 

    

    
    
    
    【微信小程式】API之網路（一）發起請求
    
     
     
								
								            
						
                週末很早起來了，折騰一上午終於把小demo搞定了。1.微信小程式的發起網路請求，使用wx.request(OBJECT)，OBJECT的引數說明如下引數名型別必填預設值說明urlString是開發者伺服 
    

    
  
 

    

    
    
    
    【微信小程式】微信小程式掉進的坑之模板訊息
    
     
     
								
								            
							
							
							一、關於formId

在小程式開發文件中我們可以瞭解到傳送模板訊息需要以下引數: 


在form_id引數中，我選擇了使用表單提交獲取formId的方法。 


程式碼如下： 
 


當在微信開發 
    

    
  
 

    

    
    
    
    【微信小程式】在js中匯入第三方js或自己寫的js，使用外部js中的function的兩種方法 import和require的區別使用方法
    
     
     如下 定義了一個外部js檔案，其中有一個function 

 
  
  
  import lunaCommon from '../lunaCommon.js';

var ctx = wx.getStorageSync("ctx");
var filter = "/ms-code";

var apis 
    

    
  
 

    

    
    
    
    【微信小程式】--bindtap引數傳遞，配合wx.previewImage實現多張縮圖預覽
    
     
      
 
   
 
 本文為原創隨筆，純屬個人理解。如有錯誤，歡迎指出。 
 如需轉載請註明出處 
 
 在微信小程式中預覽圖片分為 
 　　a、預覽本地相簿中的圖片。 
 　　b、預覽某個wxml中的多張圖片。 
 分析：實質其實是一樣的。都是給wx.previewImage傳入引數 
 
  
 
    

    
  
 

    

    
    
    
    【微信小程式】公共方法實現實時捕捉input輸入
    
     
      
 
  
  
  
  專案中，一個表單中經常有好幾個input，但是微信小程式並不像vue那樣實現雙向繫結，所以我們要自己去實現當用戶輸入的時候，實時獲取使用者輸入的值。 方法比較簡單，就兩個步驟。 
  
 1.wxml 
   <input data-name='form.base.name 
    

    
  
 

    

    
    
    
    【微信小程式】c# 實現獲取openid、session_key 服務端
    
     
      
 
 
 c#寫一個獲取微信小程式 openid和session_key 的方法。。 
 1，微信小程式端 
 // 登入
    wx.login({
      success: res => {
        // 傳送 res.code 到後臺換取 openId, sessionKey,  
    

    
  
 

    

    
    
    
    【微信小程式】scroll-view 注意事項
    
     
      
 
 
 之前用到scroll-view的時候踩過一次坑，解決後，覺得不是什麼很深的坑，遂沒有做記錄，結果這次又用到了，同一個坑又掉進去一次，心裡很難受，難受我沒長腦子，也難受我眼高手低，所以這一次，我決定記錄下來，給自己一個警醒！ 
   
 橫向滑動注意事項： 
 1、scroll-view 
    

    
  
 

    

    
    
    
    【微信小程式】下載並預覽文件——pdf、word、excel等多種型別
    
     
      
 
 
 簡要：wx.downloadFile(OBJECT)下載檔案資源到本地，客戶端直接發起一個 HTTP GET 請求，返回檔案的本地臨時路徑。wx.openDocument(OBJECT)新開頁面開啟文件，支援格式：doc, xls, ppt, pdf, docx, xlsx, pptx。 
 呼 
    

    
  
 

    

    
    
    
    【微信小程式】入門
    
     
      
 
 
 MINA框架：響應式資料繫結系統：檢視層、邏輯層，背後有MVVM 
     將View 的狀態和行為抽象化，將檢視 UI 和業務邏輯分開 
 一、檢視層描述語言： 
      1、WXML：類似HTML 
     
    

    
  
 

    

    
    
    
    【微信小程式】 storage的小結
    
     
     
								
								            
						
                微信本地儲存，為此提供了好幾個方法。

api文件如下：





ps: api文件我居然翻到了兩個版本，真特麼神奇。還好兩版就是一個精簡版一個詳解版。


每個微信小程式都可以有自己的本地快取，可以 
    

    
  
 

    

    
    
    
    【微信小程式】上拉重新整理和下拉載入
    
     
     
								
								            
						
                上拉重新整理和下拉載入有兩種方式可以實現：

1.使用scroll-view元件進行操作，使用自帶的scrolltoupper和scrolltolower事件可以實現。適合頁面區域性的上拉下拉。

附上