白嫩白嫩BBBBBBBBB-_白洁公交车被挺进体内H_白洁被五个人玩一夜_白洁被强后奷高潮了_白洁被邻居灌满精H高清视频_把腿张开老子臊烂你的电视剧

 

專欄介紹

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

 

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

 

源碼包

 

 

 

 

源碼包

 

 

 

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

 

官方接入指南：

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

 

一、填寫郵箱和密碼

請(qǐng)?zhí)顚懳醋?cè)過(guò)公眾平臺(tái)、開放平臺(tái)、企業(yè)號(hào)、未綁定個(gè)人號(hào)的郵箱。

 

二、激活郵箱

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

 

三、填寫主體信息

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

 

 

 

企業(yè)類型帳號(hào)可選擇兩種主體驗(yàn)證方式。

 

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

 

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

 

 

開發(fā)前準(zhǔn)備

 

 

一、綁定開發(fā)者

 

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

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

 

二、獲取AppID

 

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

 

 

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

 

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

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

 

四、微信應(yīng)用開放的服務(wù)和組件：

 

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

·        基礎(chǔ)內(nèi)容：圖標(biāo)、文本、進(jìn)度條

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

·        操作反饋

·        導(dǎo)航

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

·        地圖

·        畫布

·        文件操作能力

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

·        數(shù)據(jù)：數(shù)據(jù)緩存能力

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

·        設(shè)備：網(wǎng)絡(luò)狀態(tài)、系統(tǒng)信息、重力感應(yīng)、羅盤

·        界面：設(shè)置導(dǎo)航條、導(dǎo)航、動(dòng)畫、繪圖等等

·        開放接口：登錄，包括簽名加密，用戶信息、微信支付、模板消息

 

 

編寫代碼

 

 

一、創(chuàng)建項(xiàng)目

 

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

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

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

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

 

 

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

 

二、文件結(jié)構(gòu)

 

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

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

app.js 后綴的是腳本文件

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

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

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

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

       .wxml（必須）頁(yè)面結(jié)構(gòu)

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

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

 

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

 

        

三、配置 app.json

 

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

 

 

app.json 配置項(xiàng)列表

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

 

pages

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

 

文件名不需要寫文件后綴，因?yàn)榭蚣軙?huì)自動(dòng)去尋找路徑.json,.js,.wxml,.wxss的四個(gè)文件進(jìn)行整合。

 

tabBar

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

 

window

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

 

四、邏輯層 app.js

 

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

 

五、視圖層 WXML 與 WXSS

 

     WXML

WXML（WeiXin MarkupLanguage）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)

 

1、數(shù)據(jù)綁定

使用雙大括號(hào)標(biāo)簽獲取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ù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

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

 

六、https請(qǐng)求

 

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

 

 

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

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