專(zhuān)欄介紹

新東網(wǎng)自2001年成立以來(lái)，掌握大數據、云計算、通信、物聯(lián)網(wǎng)及區塊鏈等信息技術(shù)，擁有一支逾16年經(jīng)驗的強大IT團隊。為沉淀企業(yè)技術(shù)實(shí)力，繼續發(fā)揮行業(yè)優(yōu)勢，《東網(wǎng)快訊》特邀新東網(wǎng)技術(shù)大咖帶您走進(jìn)這些領(lǐng)先信息技術(shù)，揭秘新東網(wǎng)16年來(lái)的技術(shù)成果。

 

本文將帶你一步步創(chuàng )建完成一個(gè)微信小程序，并可以在手機上體驗該小程序的實(shí)際效果。這個(gè)小程序將調用豆瓣電影資訊接口展示電影熱訊、電影推薦和查詢(xún)電影。

 

源碼包

 

 

 

 

源碼包

 

 

 

網(wǎng)址： https://mp.weixin.qq.com

 

官方接入指南：

https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=20161107

 

一、填寫(xiě)郵箱和密碼

請填寫(xiě)未注冊過(guò)公眾平臺、開(kāi)放平臺、企業(yè)號、未綁定個(gè)人號的郵箱。

 

二、激活郵箱

登錄郵箱，查收激活郵件，點(diǎn)擊激活鏈接

 

三、填寫(xiě)主體信息

點(diǎn)擊激活鏈接后，繼續下一步的注冊流程。請選擇主體類(lèi)型選擇，完善主體信息和管理員信息。

 

 

 

企業(yè)類(lèi)型帳號可選擇兩種主體驗證方式。

 

方式一：需要用公司的對公賬戶(hù)向騰訊公司打款來(lái)驗證主體身份。打款信息在提交主體信息后可以查看到。

 

方式二：通過(guò)微信認證驗證主體身份，需支付300元認證費。認證通過(guò)前，小程序部分功能暫無(wú)法使用。

 

 

開(kāi)發(fā)前準備

 

 

一、綁定開(kāi)發(fā)者

 

登錄微信公眾平臺小程序，進(jìn)入用戶(hù)身份- 開(kāi)發(fā)者，新增綁定開(kāi)發(fā)者。

已認證的小程序可以綁定不多于20個(gè)開(kāi)發(fā)者。未認證的小程序可以綁定不多于10個(gè)開(kāi)發(fā)者。

 

二、獲取AppID

 

進(jìn)入“設置-開(kāi)發(fā)設置”（需要管理員微信掃描登陸獲?。?，獲取AppID信息。

 

 

三、閱讀開(kāi)發(fā)文檔并下載開(kāi)發(fā)者工具

 

官方開(kāi)發(fā)簡(jiǎn)易教程：

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=20161107

 

四、微信應用開(kāi)放的服務(wù)和組件：

 

·        視圖容器：視圖(view)、滾動(dòng)視圖（scroll-view）、滑動(dòng)視圖(swiper)

·        基礎內容：圖標、文本、進(jìn)度條

·        表單組件：按鈕、表單等等

·        操作反饋

·        導航

·        媒體組建：音頻、圖片、視頻。

·        地圖

·        畫(huà)布

·        文件操作能力

·        網(wǎng)絡(luò )：上傳下載能力、WebSocket

·        數據：數據緩存能力

·        位置：獲取位置、查看位置

·        設備：網(wǎng)絡(luò )狀態(tài)、系統信息、重力感應、羅盤(pán)

·        界面：設置導航條、導航、動(dòng)畫(huà)、繪圖等等

·        開(kāi)放接口：登錄，包括簽名加密，用戶(hù)信息、微信支付、模板消息

 

 

編寫(xiě)代碼

 

 

一、創(chuàng )建項目

 

我們需要下載安裝開(kāi)發(fā)者工具

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161107

開(kāi)發(fā)者工具安裝完成后，打開(kāi)并使用微信掃碼登錄。選擇創(chuàng )建“項目”，填入上文獲取到的 AppID ，設置一個(gè)本地項目的名稱(chēng)（非小程序名稱(chēng)），比如“我的第一個(gè)項目”，并選擇一個(gè)本地的文件夾作為代碼存儲的目錄，點(diǎn)擊“新建項目”就可以了。

為方便了解微信小程序的基本代碼結構，在創(chuàng )建過(guò)程中，如果選擇的本地文件夾是個(gè)空文件夾，開(kāi)發(fā)者工具會(huì )提示，是否需要創(chuàng )建一個(gè) quick start 項目。選擇“是”，開(kāi)發(fā)者工具會(huì )幫助我們在開(kāi)發(fā)目錄里生成一個(gè)簡(jiǎn)單的 demo。

 

 

項目創(chuàng )建成功后，我們就可以點(diǎn)擊該項目，進(jìn)入并看到完整的開(kāi)發(fā)者工具界面，點(diǎn)擊左側導航，在“編輯”里可以查看和編輯我們的代碼，在“調試”里可以測試代碼并模擬小程序在微信客戶(hù)端效果，在“項目”里可以發(fā)送到手機里預覽實(shí)際效果。

 

二、文件結構

 

小程序包含一個(gè)描述整體程序的 app 和多個(gè)描述各自頁(yè)面的 page。

一個(gè)小程序主體部分由三個(gè)文件組成，必須放在項目的根目錄，如下：

app.js 后綴的是腳本文件

app.json 后綴的文件是配置文件

app.wxss 后綴的是樣式表文件

一個(gè)小程序頁(yè)面由四個(gè)文件組成，分別是：

       .js（必須）頁(yè)面邏輯

       .wxml（必須）頁(yè)面結構

       .wxss（非必須）頁(yè)面樣式表

       .json（非必須）頁(yè)面配置

 

注意：小程序規定描述頁(yè)面的這四個(gè)文件必須具有相同的路徑與文件名

 

        

三、配置 app.json

 

使用app.json文件來(lái)對微信小程序進(jìn)行全局配置，決定頁(yè)面文件的路徑、窗口表現、設置網(wǎng)絡(luò )超時(shí)時(shí)間、設置多 tab 等。

 

 

app.json 配置項列表

屬性	類(lèi)型	必填	描述
pages	String Array	是	設置頁(yè)面路徑
window	Object	否	設置默認頁(yè)面的窗口表現
tabBar	Object	否	設置底部 tab 的表現
networkTimeout	Object	否	設置網(wǎng)絡(luò )超時(shí)時(shí)間
debug	Boolean	否	設置是否開(kāi)啟  debug 模式

 

pages

項目使用到的頁(yè)面都需要在這邊配置聲明，接受一個(gè)數組，每一項都是字符串，來(lái)指定小程序由哪些頁(yè)面組成。每一項代表對應頁(yè)面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁(yè)面。

 

文件名不需要寫(xiě)文件后綴，因為框架會(huì )自動(dòng)去尋找路徑.json,.js,.wxml,.wxss的四個(gè)文件進(jìn)行整合。

 

tabBar

tabBar （客戶(hù)端窗口的底部有tab欄可以切換頁(yè)面）是一個(gè)數組，只能配置最少2個(gè)、最多5個(gè)tab，tab 按數組的順序排序。

 

window

用于設置小程序的狀態(tài)欄、導航條、標題、窗口背景色。

 

四、邏輯層 app.js

 

小程序開(kāi)發(fā)框架的邏輯層是由JavaScript編寫(xiě)，邏輯層將數據進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。由于框架并非運行在瀏覽器中，所以JavaScript 在 web 中一些能力都無(wú)法使用，如 document，window 等。造成無(wú)法使用JQuery等前臺基于window對象的js框架。

 

五、視圖層 WXML 與 WXSS

 

     WXML

WXML（WeiXin MarkupLanguage）是框架設計的一套標簽語(yǔ)言，結合基礎組件、事件系統，可以構建出頁(yè)面的結構

 

1、數據綁定

使用雙大括號標簽獲取xxx.js中data值，動(dòng)態(tài)改變data中的值時(shí)wxml中實(shí)時(shí)變化

  {{message}}

// page.js

Page({

  data: {

    message: 'Hello MINA!'

  }

})

2、列表渲染

 {{item}} 

// page.js

Page({

  data: {

    array: [1, 2, 3, 4, 5]

  }

})

3、條件渲染

// page.js

Page({

  data: {

    view: 'MINA'

  }

})

4、模板

    FirstName: {{firstName}}, LastName: {{lastName}}

// page.js

Page({

  data: {

    staffA: {firstName: 'Hulk', lastName: 'Hu'},

    staffB: {firstName: 'Shang', lastName: 'You'},

    staffC: {firstName: 'Gideon', lastName: 'Lin'}

  }

})

5、事件

 {{count}} 

Page({

  data: {

    count: 1

  },

  add: function(e) {

    this.setData({

      count: this.data.count + 1

    })

  }

})

WXSS

WXSS(WeiXinStyle Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式，具有CSS 大部分特性

       尺寸單位：rpx（responsive pixel）: 可以根據屏幕寬度進(jìn)行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

       rem（root em）: 規定屏幕寬度為20rem；1rem = (750/20)rpx 。

 

六、https請求

 

小程序只支持https協(xié)議，一個(gè)微信小程序，同時(shí)只能有5個(gè)網(wǎng)絡(luò )請求連接

 

 

注意：要微信小程序進(jìn)行網(wǎng)絡(luò )通信，必須先設置域名，不然會(huì )出現錯誤：URL 域名不合法

使用管理員登陸：“設置”—“開(kāi)發(fā)設置”—“服務(wù)器設置”