本文章制作小程序的所有代碼都放在github啦

注冊賬號

微信公眾平臺（點擊跳轉至頁面）

點擊右上角的“立即注冊”-選擇小程序-使用郵箱進行激活-選擇“個人”-用微信掃碼成為管理員-成功后進入小程序管理界面-如下圖，復制AppID后面會用到

下載微信開發者

開發工具下載地址：穩定版 Stable Build | 微信開放文檔 (qq.com)-掃碼登錄后-進入主界面-新建項目并記住存放該項目的路徑

開始制作

以每周電影評分的小程序作為例子，跟著圖片一步步來就可以，每一步都很詳細（制作過程中有不明白的歡迎隨時提問），對于新手只要實現了這個小程序的相關內容，實現其他小程序的基本操作是沒有問題的，下圖是最終的成果圖，有興趣的就往下看吧，一天速成版

?創建項目和目錄文件結構

?

?

具體還可以配置哪些，可以參考下圖或者鏈接頁面配置 | 微信開放文檔 (qq.com)?

傳統的布局

?應用彈性盒子布局

響應式長度單位rpx，設置圖片大小

?

?

新增頁面

在pages文件下面添加如下文件

?

分別在文件中添加如下代碼

?

使用navigator組件，從index頁跳轉到weekly頁?

配置底部標簽欄tabBar?

配置全局的導航欄樣式?

數據綁定-從視圖中抽離出數據

1、一般來說會在頁面加載過程中，通過一個ajax調用來請求server返回本周推薦電影的詳細信息

2、首先，這種方式需要我們在收到數據之后，或者說每次這個數據被更新的時候，我們都需要執行這樣的一段代碼來對這個視圖進行更新

?

?

小程序運行環境與基本架構?

每個小程序都是運行在它所在的微信客戶端上的，通過微信客戶端給它提供的運行環境，小程序可以直接獲取微信客戶端的原生體驗和原生能力

wxml視圖文件和wxss樣式文件都是對渲染層的描述，腳本文件則是對頁面的邏輯層的描述

Index頁和weekly頁，都內置了一個webviewId的內部狀態變量，來記錄它們各自是在幾號weview進程之中進行渲染的

?

條件渲染-條件成立時組件才會渲染生成

?列表渲染

使用swiper組件-將列表展示變成輪播圖展示?

?

頁面的生命周期函數

需求1：swiper中如何默認切換到最后一頁幻燈片

需求2：非本周幻燈片頁添加“返回本周”按鈕

需求3：頁面狀態數據如何初始化、onLoad（options）

?

需求4：對onShow、onReady、onHide、onUnload這四個周期函數進行介紹

?組件的自定義數據屬性

需求：從weekly頁上的電影卡片跳轉到電影詳情頁

?

實現電影詳情頁的基本框架?

?恢復weekly頁上每個“返回本周”按鈕的點擊行為（catchtap應用）

?頁面初始化獲取query參數：onLoad(options)

發起請求API-wx.request?

小程序網絡相關API：wx.request、wx.uploadFile、wx.downloadFile、WebSocket相關API

調用豆瓣電影API

?

?

?

動態設置導航欄狀態和標題?

頁面事件處理函數與自定義頁面轉發

?onPullDownRefresh：下拉刷新時調用

onReachBottom：上劃觸底時調用

onPageScroll：在頁面上劃動時調用

onShareAppMessage：分享時被調用

需求：給weekly頁自定義轉發“每周推薦”給detail頁自定義轉發“向你推薦”

??

總結

以上是生活随笔為你收集整理的零基础制作微信小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。