首頁小程序開(kāi)發(fā) 正文

微信小程序開(kāi)發(fā)文檔起(qǐ)步（小程序開(kāi)發(fā)文檔怎麼(me)寫）

小程序開(kāi)發(fā) 2023-03-20T03:45:07 2449

本篇文章給大家談談微信小程序開(kāi)發(fā)文檔起(qǐ)步，以及小程序開(kāi)發(fā)文檔怎麼(me)寫對(duì)應的知識點，希望對(duì)各位有所幫助，不要忘了收藏本站喔。本文目錄一覽： 1、如何快速開(kāi)發(fā)個微信小程序

本篇文章給大家談談微信小程序開(kāi)發(fā)文檔起(qǐ)步，以及小程序開(kāi)發(fā)文檔怎麼(me)寫對(duì)應的知識點，希望對(duì)各位有所幫助，不要忘了收藏本站喔。

如何快速開(kāi)發(fā)個微信小程序

無論是前端開(kāi)發(fā)，還(hái)是後(hòu)端開(kāi)發(fā)，時間長(cháng)了，你總會(huì)能(néng)總結出它的一些規律的，對(duì)于前端開(kāi)發(fā)主要就兩(liǎng)條，頁面(miàn)展現，邏輯處理。如果是全流程開(kāi)發(fā)的話，那就是，如何創建項目，頁面(miàn)如何實現，數據獲取和邏輯處理如何實現，如何打包上線。移動端或者前端，基本開(kāi)發(fā)流程就這(zhè)個四個步驟。所以在在前端方面(miàn)去學(xué)習新一門開(kāi)發(fā)技術，隻要你解決了這(zhè)四個問題，那一切就OK了，下面(miàn)我就講一下，我在學(xué)習微信小程序開(kāi)發(fā)，如何用這(zhè)四步法快速上手開(kāi)發(fā)的

學(xué)習一門新技術先看下它的開(kāi)發(fā)文檔小程序介紹

然後(hòu)呢就是開(kāi)始一些準備的步驟，微信公衆平台提供我們開(kāi)發(fā)管理的功能(néng) 微信工作平台

賬号注冊

小程序信息配置

請看小程序開(kāi)發(fā)步驟

小程序項目的創建

到此第一個問題我們就算完成(chéng)了，接下來解決小程序界面(miàn)如何搭建。

然後(hòu)最重要的，微信提供自己的開(kāi)發(fā)者工具，不需要用chrome什麼(me)調試，微信開(kāi)發(fā)者工具提供wxapi的調用測試能(néng)力，這(zhè)些在chrome裡(lǐ)面(miàn)是測試不了的

框架的視圖層由 WXML 與 WXSS 編寫，由組件來進(jìn)行展示。

將(jiāng)邏輯層的數據反應成(chéng)視圖，同時將(jiāng)視圖層的事(shì)件發(fā)送給邏輯層。

WXML(WeiXin Markup language) 用于描述頁面(miàn)的結構。

WXS(WeiXin Script) 是小程序的一套腳本語言，結合 WXML，可以構建出頁面(miàn)的結構。

WXSS(WeiXin Style Sheet) 用于描述頁面(miàn)的樣(yàng)式。

小程序的頁面(miàn)是由wxml 和wxss這(zhè)兩(liǎng)個文件來實現的，wxml結構如何寫請參考微信小程序組件

wxss是負責樣(yàng)式控制的，基本類似于css,支持flex布局，所以要想上手構建微信小程序的界面(miàn)，最好(hǎo)要熟悉html ,css.

還(hái)有最重要的就是生命周期了

//index.js

Page({

data: {

text: "This is page data."

onLoad: function(options) {

// 頁面(miàn)創建時執行

onShow: function() {

// 頁面(miàn)出現在前台時執行

onReady: function() {

// 頁面(miàn)首次渲染完畢時執行

onHide: function() {

// 頁面(miàn)從前台變爲後(hòu)台時執行

onUnload: function() {

// 頁面(miàn)銷毀時執行

onPullDownRefresh: function() {

// 觸發(fā)下拉刷新時執行

onReachBottom: function() {

// 頁面(miàn)觸底時執行

onShareAppMessage: function () {

// 頁面(miàn)被(bèi)用戶分享時執行

onPageScroll: function() {

// 頁面(miàn)滾動時執行

onResize: function() {

// 頁面(miàn)尺寸變化時執行

onTabItemTap(item) {

// tab 點擊時執行

console.log(item.index)

console.log(item.pagePath)

console.log(item.text)

// 事(shì)件響應函數

viewTap: function() {

this.setData({

text: 'Set some data for updating view.'

}, function() {

// this is setData callback

})

// 自由數據

customData: {

hi: 'MINA'

}

})

微信提供的界面(miàn)組件很多，沒(méi)必要一下子全學(xué)會(huì)，會(huì)用一兩(liǎng)個就行，其他的遇到需要的時候現查先做，這(zhè)樣(yàng)又節約學(xué)習時間，又能(néng)夠加深理解。到此第二個問題我們解決了，下面(miàn)看第三個問題，數據邏輯如何處理。

數據定義

數據展現

邏輯處理是通過(guò)js文件來操作的

一個服務僅僅隻有界面(miàn)展示是不夠的，還(hái)需要和用戶做交互：響應用戶的點擊、獲取用戶的位置等等。在小程序裡(lǐ)邊，我們就通過(guò)編寫 JS 腳本文件來處理用戶的操作。

view{{ msg }}/view

button bindtap="clickMe"點擊我/button

點擊 button 按鈕的時候，我們希望把界面(miàn)上 msg 顯示成(chéng) "Hello World"，于是我們在 button 上聲明一個屬性: bindtap ，在 JS 文件裡(lǐ)邊聲明了 clickMe 方法來響應這(zhè)次點擊操作：

Page({

clickMe: function() {

this.setData({ msg: "Hello World" })

}

})

響應用戶的操作就是這(zhè)麼(me)簡單，更詳細的事(shì)件可以參考文檔 WXML - 事(shì)件。

此外你還(hái)可以在 JS 中調用小程序提供的豐富的 API，利用這(zhè)些 API 可以很方便的調起(qǐ)微信提供的能(néng)力，例如獲取用戶信息、本地存儲、微信支付等。在前邊的 QuickStart 例子中，在 pages/index/index.js 就調用了 wx.getUserInfo 獲取微信用戶的頭像和昵稱，最後(hòu)通過(guò) setData 把獲取到的信息顯示到界面(miàn)上。更多 API 可以參考文檔小程序的API 。

現在幾乎每個應用都(dōu)需要從後(hòu)端獲取數據，那麼(me)小程序如何獲取呢，當然是通過(guò)網路操作了。我們封裝了小程序的網絡操作

const app = getApp()

const request = (url, options) = {

return new Promise((resolve, reject) = {

wx.request({

url: `${app.globalData.host}${url}`,

method: options.method,

data: options.method === 'GET' ? options.data : JSON.stringify(options.data),

header: {

'Content-Type': 'application/json; charset=UTF-8'

// 'x-token': 'x-token' // 看自己是否需要

success(request) {

if (request.data.error_code === 0) {

resolve(request.data)

} else {

reject(request.data)

}

fail(error) {

reject(error.data)

}

})

}

const gets = (url, options = {}) = {

return request(url, { method: 'GET', data: options })

}

const post = (url, options) = {

return request(url, { method: 'POST', data: options })

}

const put = (url, options) = {

return request(url, { method: 'PUT', data: options })

}

// 不能(néng)聲明DELETE（關鍵字）

const remove = (url, options) = {

return request(url, { method: 'DELETE', data: options })

}

module.exports = {

gets,

post,

put,

remove

}

如何使用請看下圖

數據獲取

數據展現如下圖

數據展現

到此，第三個問題我們就解決的了下面(miàn)看第四個問題。

小程序發(fā)布文檔說明

小程序發(fā)布步驟

到此四個問題都(dōu)解決了。

總結：本文内容是很簡單的，借用了大部分官方文檔，其實本文目的不是教你學(xué)小程序開(kāi)發(fā)，而是分享一下在學(xué)習一項新事(shì)物我的方法和思路，互聯網技術變化是很快的，我覺得一個人的能(néng)力，不僅僅是你技術有多好(hǎo)，你要明白技術是用來幹什麼(me)的，技術是用來解決現實生活中的問題的，一個好(hǎo)的程序員，不是技術能(néng)力，而是解決問題的能(néng)力，解決問題不可能(néng)隻用一種(zhǒng)技術，這(zhè)就要求你的學(xué)習能(néng)力要強，針對(duì)不同的問題，使用不同的技術，哪怕使用的技術你不熟悉，但它是解決問題最好(hǎo)的方法，那就要求你有快速學(xué)習并解決問題的能(néng)力。

學(xué)習一項新技術，我們要先抓住主線，把流程搞通了，以後(hòu)再在工作中慢慢的熟悉和豐富對(duì)它細節的一些認知，所以學(xué)一項東西前多問自己幾個問題，我學(xué)什麼(me)，我爲什麼(me)學(xué)，我怎麼(me)學(xué)，等。先思考後(hòu)學(xué)習，一定會(huì)讓你事(shì)半功倍。

對(duì)于怎麼(me)學(xué)習微信小程序開(kāi)發(fā)，我問了自己上面(miàn)的四個問題，每個問題，我隻需要了解大體内容，四個問題都(dōu)解決了，然後(hòu)整個流程也就通了，以後(hòu)也就是慢慢的對(duì)每個問題内容的細節慢慢的熟悉和了解了，其實花了不到一下午的時間，我就搞出了一個簡單的demo出來了，了解的内容基本已經(jīng)覆蓋微信小程序日常開(kāi)發(fā)80%的内容了。以上就是我的一點學(xué)習心得。

最後(hòu) 小程序Demo

Demo截圖

首頁

我的

點擊我的任意條目，數據是從第三方聚合平台提供的api獲取的

最後(hòu)目前有很多的多端開(kāi)發(fā)框架，背景大多是都(dōu)是因爲小程序開(kāi)發(fā)的盛行

其他還(hái)有很多例如

阿裡(lǐ)的rax

我們自己的ditto

微信小程序如何開(kāi)發(fā)

微信小程序的優勢十分明顯，小程序是不需要下載安裝便可以使用的應用，它實現了應用觸手可及的夢想，用戶掃一掃或搜一下即可打開(kāi)應用，也體現了用完即走的理念，用戶不用關心是否安裝太多應用的問題，應用將(jiāng)無處不在，随時可用，但又無需安裝卸載。

小程序觸及了PC網頁，公衆号，H5，APP無法觸及的地方，其無需安裝，用完即走的理念能(néng)夠滿足用戶需求且節省手機内存。站在小程序的擁有者的立場，其開(kāi)發(fā)成(chéng)本大大減小，同時可借助微信強大的流量入口，因而也降低了推廣的難度。總的來說，微信小程序是一種(zhǒng)全新的方式，能(néng)夠更好(hǎo)地在用戶和服務中建立連接，并且可以在微信中便捷地獲取和傳播，具有不錯的使用體驗。

小程序全面(miàn)開(kāi)放申請以後(hòu)，作爲企業、政府、媒體、其他組織或者個人的開(kāi)發(fā)者，都(dōu)可以申請并注冊小程序。小程序和微信的訂閱号、服務号以及企業号是并行的體系，具有獨立的注冊以及發(fā)布流程。

小程序的接入主要有4個步驟：

(1) 小程序注冊：在微信公衆平台官網首頁注冊并提交注冊信息、完善主體信息和管理員信息。

(2) 完善小程序信息：完善小程序的基本信息如名稱、頭像及服務範圍等。開(kāi)發(fā)前需綁定開(kāi)發(fā)者并獲取APP ID，以保證程序可以通過(guò)手機進(jìn)行掃碼測試。

(3) 開(kāi)發(fā)小程序：下載安裝微信開(kāi)發(fā)者工具，微信官方提供了一套完整的開(kāi)發(fā)框架，開(kāi)發(fā)者可以根據微信開(kāi)發(fā)文檔進(jìn)行小程序的開(kāi)發(fā)與調試。

(4) 代碼審核及發(fā)布：小程序開(kāi)發(fā)完成(chéng)後(hòu)，不能(néng)夠直接發(fā)布，需提交代碼與開(kāi)發(fā)配置信息提交審核，完成(chéng)後(hòu)尚可發(fā)布。

微信Web開(kāi)發(fā)者工具區别于H5的開(kāi)發(fā)工具+浏覽器 Device Mode預覽的模式，而是基于自己的開(kāi)發(fā)者工具，可以實現同步本地文件+開(kāi)發(fā)調試+編譯預覽+上傳+發(fā)布等一整套流程。同時小程序自己開(kāi)發(fā)了一套WXML标簽語言和 WXSS樣(yàng)式語言，并非直接使用标準HTML5+CSS3。同時提供了很多原生APP的組件，之前在HTML5中需要模拟才能(néng)實現的功能(néng)，在小程序中可以直接調用組件來實現。

小程序開(kāi)發(fā)框架的核心是一個響應的數據綁定系統。分爲視圖層和邏輯層，小程序開(kāi) 發(fā)工具提供了視圖層描述語言WXML和WXSS，以及基于 JavaScript的邏輯層框架，并在視圖層與邏輯層間設置了數據傳輸和事(shì)件系統，使得開(kāi)發(fā)者能(néng)夠很簡單地將(jiāng)重心放在數據與邏輯上。處理事(shì)務邏輯的地方被(bèi)稱爲邏輯層。在微信小程序中，所有.js腳本文件的集合構成(chéng)邏輯層。邏輯層與視圖層相互配合，完成(chéng)數據處理及接收事(shì)件反饋。框架的視圖層由WXML與WXSS編寫，通過(guò)組件進(jìn)行展現。對(duì)于小程序本身，.wxml文件與.wxss文件的集合構成(chéng)了視圖層，邏輯層處理數據之後(hòu)，會(huì)發(fā)送給視圖層用于與用戶的交互，同時接收用戶對(duì)視圖層的反饋。視圖層以給定的樣(yàng)式展現數據并反饋事(shì)件給邏輯層，數據展現是通過(guò)組件來進(jìn)行的。視圖的基本構成(chéng)是組件。

項目開(kāi)發(fā)完成(chéng)後(hòu)，管理員需手動打包上傳代碼，填寫相關配置類目并將(jiāng)代碼提交審核，若第一次審核未通過(guò)，再次提交審核將(jiāng)開(kāi)放提供測試的入口，該入口由開(kāi)發(fā)者提供，用于微信審核人員審核微信小程序時登錄。審核後(hòu)手動發(fā)布即可。

微信小程序站在月活躍用戶9億人次的微信的肩膀上，自帶流量趨勢，入口多，功能(néng)簡單便捷。小程序功能(néng)快速叠代，意味著(zhe)圍繞小程序的開(kāi)發(fā)和生态工具建設將(jiāng)會(huì)是移動互聯網的一個巨大機會(huì)。目前各行業内諸多企業單位紛紛加入了小程序開(kāi)發(fā)，開(kāi)通了小程序功能(néng)。但小程序進(jìn)行優化後(hòu)，開(kāi)放了很多入口，使得開(kāi)發(fā)者和用戶關注度不斷提升。縱使一些高頻和複雜應用暫時無法被(bèi)小程序取代，但是一些低頻應用的主要功能(néng)，隻要能(néng)在小程序上實現，APP就可以完全卸載了。總的來說，微信小程序目前發(fā)展空間甚好(hǎo)，至于以後(hòu)未來的發(fā)展仍舊不能(néng)夠準确預測。

微信小程序開(kāi)發(fā)文檔起(qǐ)步（小程序開(kāi)發(fā)文檔怎麼(me)寫）

簡單幾個步驟完成(chéng)微信小程序開(kāi)發(fā)

想要簡單幾個步驟完成(chéng)微信小程序開(kāi)發(fā)，建議使用《天客通》萬能(néng)可視化編輯，DIY圖形拖拽開(kāi)發(fā)小程序；

六大優勢：

1、步驟簡單，注冊——編輯——發(fā)布，三步即可完成(chéng)！

2、海量模闆，彙集各行各業成(chéng)熟的小程序模闆，選擇性豐富！

3、功能(néng)強大，豐富的營銷插件，滿足所有營銷模式！

4、萬能(néng)DIY，模闆可以随意編輯、排版，功能(néng)根據需要随意更改，你的小程序你做主！

5、獨立後(hòu)台，強大的後(hòu)台功能(néng)，方便地管理小程序，自由上傳商品、修改，以及強大的統計功能(néng)！

6、關于售後(hòu)，專家客服一對(duì)一，跟蹤指導，隻要會(huì)上網，就會(huì)開(kāi)發(fā)小程序！

微信小程序開(kāi)發(fā)方法

您好(hǎo)，

“微信小程序”開(kāi)發(fā)之前必須要完成(chéng)和注冊認證。如果是個人或者小公司想開(kāi)發(fā)微信小程序，也可以找微信認證第三方開(kāi)發(fā)商，比如赢在移動、正品科技等。

1、微信小程序注冊

在微信公衆平台官網首頁，按照提示點擊右上角的“立即注冊”按鈕，裡(lǐ)面(miàn)總過(guò)有12步，按照要求提交就可以了。

2、小程序申請微信認證

政府、媒體、其他組織類型帳号，必須通過(guò)微信認證驗證主體身份。企業類型帳号，可以根據需要确定是否申請微信認證。已認證帳号可使用微信支付、微信卡券等高級權限。

認證入口：登錄小程序—設置—基本設置—微信認證—詳情

3、小程序申請微信支付

已認證的小程序可申請微信支付。

4、小程序綁定微信開(kāi)放平台帳号

小程序綁定微信開(kāi)放平台帳号後(hòu)，可與帳号下的其他移動應用、網站應用及公衆号打通，通過(guò)UnionID機制滿足在多個應用和公衆号之間統一用戶帳号的需求。

UnionID機制說明：如果開(kāi)發(fā)者擁有多個移動應用、網站應用、和公衆帳号(包括小程序)，可通過(guò)UnionID來區分用戶的唯一性，因爲隻要是同一個微信開(kāi)放平台帳号下的移動應用、網站應用和公衆帳号(包括小程序)，用戶的unionid是唯一的。換句話說，同一用戶，對(duì)同一個微信開(kāi)放平台下的不同應用，UnionID是相同的。用戶的UnionID可通過(guò)調用“獲取用戶信息”接口獲取。

5、了解“獲取用戶信息”接口請查看開(kāi)發(fā)文檔—API—開(kāi)放接口—用戶信息。

綁定小程序流程說明：登錄微信開(kāi)放平台、—管理中心—公衆帳号—綁定公衆帳号

注意：微信開(kāi)放平台帳号必須完成(chéng)開(kāi)發(fā)者資質認證才可以綁定小程序。