詳解微信小程序開發教程

2021-02-13 CSDN雲計算
微信應用開放的服務和組件包含如下:審核:

根據《微信小程序平臺服務協議》,裡面有關描述如下:

2.4 為確保微信小程序平臺、微信公眾平臺、其他用戶等各方的安全、穩定及良好的用戶體驗,騰訊將對需要發布的小程序進行發布審核。

「發布審核」是指由用戶發起,將其完成初始化開發的小程序提交至騰訊,由騰訊自行或委託第三方對該小程序的合法性、合理性、安全性、穩定性、可操作性、用戶體驗等各方面,採用包括但不限於開發信息核對、安全測試、UI測試、隨機測試、動態測試、安全測試等方式,進行審查、甄別、試驗與評估的過程。發布審核結果包括審核通過與審核不通過兩種。審核不通過的,該小程序將無法發布。

之後小程序的審核極有可能採取和App store類似的策略,但相比微信其他平臺的審核,各位嚴格和複雜。

教程:

微信應用號(小程序,「應用號」的新稱呼)終於來了!目前還處於內測階段,微信只邀請了部分企業參與封測。想必大家都關心應用號的最終形態到底是什麼樣子?怎樣將一個「服務號」改造成為「小程序」?我們暫時以一款簡單的第三方工具的實例,來演示一下開發過程吧。

OK,為了讓大家儘快看到這份教程,博卡君註定要熬夜了!今晚開始更新,希望明天一早就能發布第一篇教程!記錄開始!看看幾天能完成變身吧!

序言

開始開發應用號之前,先看看官方公布的「小程序」教程吧!(以下內容來自微信官方公布的「小程序」開發指南)

本文檔將帶你一步步創建完成一個微信小程序,並可以在手機上體驗該小程序的實際效果。這個小程序的首頁將會顯示歡迎語以及當前用戶的微信頭像,點擊頭像,可以在新開的頁面中查看當前小程序的啟動日誌。

首先,我們需要擁有一個帳號,如果你能看到該文檔,我們應當已經邀請並為你創建好一個帳號。注意不可直接使用服務號或訂閱號的 AppID。 利用提供的帳號,登錄https://mp.weixin.qq.com,就可以在網站的「設置」-「開發者設置」中,查看到微信小程序的 AppID 了。

注意:如果我們不是用註冊時綁定的管理員微信號,在手機上體驗該小程序。那麼我們還需要操作「綁定開發者」。即在「用戶身份-開發者」模塊,綁定上需要體驗該小程序的微信號。本教程默認註冊帳號、體驗都是使用管理員微信號。

我們需要通過開發者工具,來完成小程序創建和代碼編輯。

開發者工具安裝完成後,打開並使用微信掃碼登錄。選擇創建「項目」,填入上文獲取到的 AppID,設置一個本地項目的名稱(非小程序名稱),比如「我的第一個項目」,並選擇一個本地的文件夾作為代碼存儲的目錄,點擊「新建項目」就可以了。

為方便初學者了解微信小程序的基本代碼結構,在創建過程中,如果選擇的本地文件夾是個空文件夾,開發者工具會提示,是否需要創建一個 quick start 項目。選擇「是」,開發者工具會幫助我們在開發目錄裡生成一個簡單的 demo。

項目創建成功後,我們就可以點擊該項目,進入並看到完整的開發者工具界面,點擊左側導航,在「編輯」裡可以查看和編輯我們的代碼,在「調試」裡可以測試代碼並模擬小程序在微信客戶端效果,在「項目」裡可以發送到手機裡預覽實際效果。

點擊開發者工具左側導航的「編輯」,我們可以看到這個項目,已經初始化並包含了一些簡單的代碼文件。最關鍵也是必不可少的,是 app.js、app.json、app.wxss 這三個。其中,.js 後綴的是腳本文件,.json 後綴的文件是配置文件,.wxss 後綴的是樣式表文件。微信小程序會讀取這些文件,並生成小程序實例。

下面我們簡單了解這三個文件的功能,方便修改以及從頭開發自己的微信小程序。

app.js 是小程序的腳本代碼。我們可以在這個文件中監聽並處理小程序的生命周期函數、聲明全局變量。調用 MINA 提供的豐富的 API,如本例的同步存儲及同步讀取本地數據。

App({  onLaunch: function () {        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中聲明的樣式規則。

.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是頁面的結構文件:

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

本例中使用了 、、來搭建頁面結構,綁定數據和交互處理函數。

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是頁面的樣式表:.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的頁面結構

<view class="container log-list">  <block wx:for-items="{{logs}}" wx:for-item="log">    <text class="log-item">{{index + 1}}. {{log}}</text>  </block></view>

logs 頁面使用 控制標籤來組織代碼,在 上使用 wx:for-items 綁定 logs 數據,並將 logs 數據循環展開節點

var util = require('../../utils/util.js')Page({  data: {    logs: []  },  onLoad: function () {    this.setData({      logs: (wx.getStorageSync('logs') || []).map(function (log) {        return util.formatTime(new Date(log))      })    })  }})

運行結果如下:


開發者工具左側菜單欄選擇「項目」,點擊「預覽」,掃碼後即可在微信客戶端中體驗。

目前,預覽和上傳功能尚無法實現,需要等待微信官方的下一步更新。

如你所見,微信官方給出的開發指南還非常簡單,很多細節、代碼和功能都沒有明確的展示,所以接下來就到博卡君展示實力的時候啦!開發教程正式開始!

做好準備工作很重要。開發一個微信應用號,你需要提前到微信的官方網站(weixin.qq.com)下載開發者工具。

註:再次強調,如果你和團隊成員共同開發該項目,則建議你們使用同樣的目錄名稱及本地目錄,以確保協同開發的統一性。如果你之前已有項目,則導入過程與以上內容近似,不再贅述。

準備工作全部完成後,點擊「新建項目」按鈕,彈出框點「確定」。

如上圖所示,此刻,微信開發者工具已經為你自動構建了一個初始的 demo項目 

該項目內包含了一個微信應用項目所需具備的基本內容和框架結構。點擊項目名稱(圖中即「cards」)進入該項目,就能看到整個項目的基本架構了:

微信目前用戶群體非常龐大,微信推出公眾號以後,火爆程度大家都看得到,也同樣推動著 Html 5 的高速發展,隨著公眾號業務的需求越來越複雜,應用號現在的到來也是恰到好處。

博卡君發現,微信提供給開發者的方式也在發生全面的改變:從操作 DOM 轉為操作數據,基於微信提供的一個過橋工具實現很多 Html 5 在公眾號很難實現的功能,有點類似於 hybrid 開發,不同於 hybrid 開發的方式是:微信開放的接口更為嚴謹,結構必須採用他提供給的組件,外部的框架和插件都不能在這裡使用上,讓開發者完全脫離操作 DOM,開發思想轉變很大。

工欲善其事,必先利其器。理解它的核心功能非常重要,先了解它的整個運作流程。

生命周期:

在index.js裡面:

開發者工具上 Console 可以看到:

在首頁 console 可以看出順序是 App Launch–>App Show–>onLoad–>onShow–>onReady。

首先是整個 app 的啟動與顯示,app 的啟動在 app.js 裡面可以配置,其次再進入到各個頁面的加載顯示等等。可以想像到這裡可以處理很多東西了,如加載框之類的都可以實現等等。

路由:

路由在項目開發中一直是個核心點,在這裡其實微信對路由的介紹很少,可見微信在路由方面經過很好的封裝,也提供三個跳轉方法。

wx.navigateTo(OBJECT):保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。

wx.redirectTo(OBJECT):關閉當前頁面,跳轉到應用內的某個頁面。

wx.navigateBack():關閉當前頁面,回退前一頁面。

這三個基本上使用足夠,在路由方面微信封裝的很好,開發者根本不用去配置路由,往往很多框架在路由方面配置很繁瑣。

組件:

此次微信在組件提供方面也是非常全面,基本上滿足項目需求,故而開發速度非常快,開發前可以認真瀏覽幾次,開發效率會很好。

其它:

任何外部框架以及插件基本上無法使用,就算原生的 js 插件也很難使用,因為以前的 js 插件也基本上全部是一操作 dom 的形式存在,而微信應用號此次的架構是不允許操作任何 dom,就連以前開發者們習慣使用的動態設置的rem.js也是不支持的。

此次微信還提供了 WebSocket,就可以直接利用它做聊天,可以開發的空間非常大。

跟公眾號對比博卡君發現,開發應用號組件化,結構化,多樣化。新大陸總是充滿著驚喜,更多的彩蛋等著大家來發現。

相關焦點

  • 小程序開發
    ES6/7 的微信小程序組件化開發框架WEPT 一個微信小程序實時運行環境wxml-parser JavaScript WXML parser 以及在線頁面demoPx 轉 Rpx 在線工具微信小程序雲端增強 SDK XpmJS4kb 模塊化開發工具 將模塊化的屬性和方法映射成小程序頁面gulp-wxa-copy-npm
  • 【官方教程】微信小程序註冊教程及開發教程
    繼續懷著美好的期望等待吧~ 小編先給大家介紹下本次開放的內容,然後再詳細介紹微信小程序註冊流程及開發教程,教程來自微信官方團隊,所以這個是最好的學習資料。 從開放的內容來看,出色的用戶體驗和快速完成產品開發是微信團隊寄予小程序的期望。 正如微信對小程序的定義一樣: 小程序是一種新的開放能力,可以在微信內被便捷地獲取和傳播,同時具有出色的使用體驗。
  • 【官方教程】微信小程序註冊教程及開發教程!
    完善小程序信息完成註冊後,微信小程序信息完善步驟和開發可同步進行。選擇對公打款的用戶,完成匯款驗證後,可以補充小程序名稱信息,上傳小程序頭像,填寫小程序介紹並選擇服務範圍。代碼審核與發布提交審核登錄微信公眾平臺小程序,進入開發管理,開發版本中展示已上傳的代碼,管理員可提交審核或是刪除代碼。
  • 微信小程序開發教程:製作一個電商小程序
    普通商家想要快速製作一個小程序,比較簡單的辦法就是使用微信小程序模板。下面就跟大家說下使用模板的微信小程序開發教程:在「上線了」sxl.cn註冊帳號後點擊「創建小程序」,選擇一個電商小程序模板(或超級雲名片-電商版)。
  • 微信小程序開發教程:做一個企業服務小程序
    其實這都不用擔心,小程序來解決!不過大部分中小企業資金有限,並沒有太多成本去組建技術團隊開發小程序,所以目前中小企業比較常用的方式是使用模板類小程序製作工具。這種開發方式非常簡單,耗時短、成本低,快的話十分鐘就能搞定,還不需要你懂任何技術知識,小白也能做好。那麼微信小程序開發教程在哪裡?
  • 微信小程序入門教程及實例開發
    這個小程序的首頁將會顯示歡迎語以及當前用戶的微信頭像,點擊頭像,可以在新開的頁面中查看當前小程序的啟動日誌。1.如果沒有收到內測邀請,可以跳過本步驟注意:如果我們不是用註冊時綁定的管理員微信號,在手機上體驗該小程序,那麼我們還需要操作「綁定開發者」。即在「用戶身份」-「開發者」模塊,綁定上需要體驗該小程序的微信號。本教程默認註冊帳號、體驗都是使用管理員微信號。2.
  • 微信小程序開發教程(含源碼)
    記得前段時間,為大家分享的微信公眾號前端開發教程,深受同學們喜歡。今天小媛為大家帶來了比微信公眾號功能更強大的—微信小程序開發課程。本套微信小程序開發課程共31集,約300分鐘左右,含全套視頻+源碼。想學習的小夥伴可以在文末獲取免費領取!
  • 微信小程序開發工具推薦(附開發教程)
    在如今移動網際網路時代,幫助各行各業商家連接線上線下雙渠道的工具,大家比較常見的就是微信小程序了。
  • 微信小程序開發入門教程(二):獲取AppId
    AppId是微信區分微信小程序的唯一標識,這個AppId會在完成小程序的註冊後由系統自動分配,我們只需要登錄註冊好的小程序便能在後臺查看到這個Id。所以我們以下分2部分介紹:註冊微信小程序和查看AppId。
  • 微信小程序開發環境搭建
    微信小程序可謂是今天最火的一個名詞了,一經出現真是轟炸了整個開發人員,當然很多App開發人員有了一個擔心,微信小程序的到來會不會給移動端App帶來一個寒冬
  • 微信小程序開發測試教程
    一.小程序應用分析  1、簡單介紹  小程序是一種微信開發不需要下載安裝即可使用的應用。  2、實質  微信小程序就是Hybrid技術的應用。  Hybrid APP(混合模式移動應用)。  小程序能夠更多的可以更多的調用手機本身的功能(如位置信息,攝像頭等)。  3、小程序註冊  小程序開發框架的邏輯層是由JavaScript編寫。 邏輯層將數據進行處理後發送給視圖層,同時接受視圖層的事件反饋。小程序再次基礎上做了一些修改方便開發: 增加 APP 和 Page 方法,進行程序和頁面的註冊。
  • 首個微信小程序開發教程,通宵吐血寫的!
    (點擊上方公眾號,可快速關注)本文出自「名片盒」團隊編寫,感謝「博卡君」推薦微信應用號(小程序,「應用號」的新稱呼)終於來了
  • 零基礎小程序開發教程
    這次教程主要是針對零基礎的小白。從申請小程序帳號到上線的完整教程。
  • 微信小程序開發教程(第4彈)
    上周五晚上微信放出官方工具和教程了,推薦程序猿小夥伴們都去試一試,結合教程和代碼,寫寫自己的 demo 也不錯。閒話不多說,開始更新!第七章:微信小程序編輯名片頁面開發編輯名片有兩條路徑,分為新增名片流程與修改名片流程。用戶手填新增名片流程:
  • 分享一點微信小程序的開發經驗
    長按識別小程序碼進入事實上,這款微信小程序的開發初衷,就是起源於當初有不止一位學員和朋友跟我提過類似的需求。後來由我們上一期的實訓生@周鑫鑫完成了最初版本。初版的功能比較簡單,就是入庫出庫查詢等基本操作。但即使這樣簡單的小程序,一直以來也都持續有新用戶增長,並且有不少用戶聯繫到我們,希望可以定製開發具有更完善功能的版本。
  • 微信小程序開發【前端+後端(Java)】
    ,相信不少人都通過各種途徑學習過微信小程序或者嘗試開發,作者就是曾經由於興趣了解開發過微信小程序,所以現在用這篇博客記錄我之前開發的一些經驗和一些心得吧。二、主要內容springboot後端架構構建小程序項目構建小程序api調用後臺resetful接口編寫小程序調用後臺接口免費的https申請linux下部署上線三、微信小程序項目構建
  • 微信小程序開發實踐入門教程
    在去年2017年1月9日,張小龍在2017微信公開課Pro上發布的小程序正式上線 。時至今日,小程序已經有整整一年時間了 。
  • 微信小程序開發(全局配置文件)
    微信小程序中全局配置文件指:app.json文件,該文件通過微信開發者工具新建項目後會自動生成,無需自己手動創建。
  • 一個教程,兩天搞定微信小程序開發!
    微信小程序的爆發力讓人始料未及。
  • 怎麼開發小程序微信?小程序開發流程來了!
    微信小程序已經是商業營銷中的重要一環,越來越多的商家和企業想要製作自己的小程序。