Android 開發者從0到1釋出一個微信小程式的採坑過程

摘要： 需要程式碼可在文末掃碼識別二維碼，在我的----關於我---可找到我的聯絡方式。 小程式已釋出，可在微信小程式中搜索找到，或者在文末找到小程式二維碼體驗一波 實現效果分析目錄 Android 開發者從0到1釋出一個微信小程式的採坑過程——首頁實現 Android...

需要程式碼可在文末掃碼識別二維碼，在我的----關於我---可找到我的聯絡方式。

小程式已釋出，可在微信小程式中搜索找到，或者在文末找到小程式二維碼體驗一波

實現效果分析目錄

0、專案的目標和完成的情況

專案完成之後能學到什麼：

1. 對 原生小程式開發 有一定的瞭解，並能利用原生技術實現簡單的頁面效果
2. 對 HTML 和 CSS 以及JavaScript 有一些瞭解。能夠實現常見的 CSS 樣式
3. 對 小程式雲開發 有所瞭解，在沒有後臺的介面，甚至不用第三方的 API，也能實現一款小程式
4. 對 小程式的釋出上線 有所瞭解，能達到獨立開發一款小程式

完成的情況：

歡迎使用，並提出反饋意見

實現的效果如下：gif展示

截圖展示：

1、開發前的準備

瞭解微信小程式個人的開發限制 [ 非常重要，一定要仔細看 ]

• https://developers.weixin.qq.com/miniprogram/product/material.html#%E4%B8%AA%E4%BA%BA%E4%B8%BB%E4%BD%93%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E6%94%BE%E7%9A%84%E6%9C%8D%E5%8A%A1%E7%B1%BB%E7%9B%AE

申請賬號、開發工具、開發文件的準備

申請賬號、準備文件，準備開發工具。

申請賬號

照著教程來肯定沒問題。

• 微信小程式賬號申請教程 https://developers.weixin.qq.com/miniprogram/dev/#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7

文件推薦閱讀

【如果你沒有一點小程式基礎推薦你先大概看一遍官方開發文件】然後再結合我下面實現的案例去學習，哪裡不懂就查哪裡，查詢的順序：開發文件 > Google > 百度 > 問我

微信小程式開發文件：瞭解到常用的元件、API、還有專案的結構和配置

w3school 的 Html 、CSS 、JavaScript：用於美化頁面，編寫出優美的程式碼。

• 微信小程式開發文件
  • https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18111920
• w3school 的 Html 、CSS 、JavaScript
  • HTML： http://www.w3school.com.cn/html/index.asp
  • CSS： http://www.w3school.com.cn/css/index.asp
  • Javascript： http://www.w3school.com.cn/js/index.asp

開發工具推薦

• 微信小程式原生開發工具
  • https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
• Sublime Text 【實際執行還是用原生的開發工具】
  • http://www.sublimetext.com/3

2、微信小程式的基礎知識

瞭解專案的組成結構

JSON 配置

官方文件 https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#json-%E9%85%8D%E7%BD%AE

WXML 模板

官方文件 https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#wxml-%E6%A8%A1%E6%9D%BF

WXSS 樣式

官方文件 https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#wxss-%E6%A0%B7%E5%BC%8F

JS 互動邏輯

官方文件 https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#js-%E4%BA%A4%E4%BA%92%E9%80%BB%E8%BE%91

簡單瞭解小程式能的載入過程

https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/framework.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%9A%84%E5%90%AF%E5%8A%A8

3、編寫頁面程式碼

首頁

• 實現效果
• 實現分析
  • Android 開發者從0到1釋出一個微信小程式的採坑過程——首頁實現

詳情頁

• 實現效果
• 實現分析
  • Android 開發者從0到1釋出一個微信小程式的採坑過程——詳情頁實現

個人頁

• 實現效果

該效果和使用幫助頁是一樣，所以可以參考下方的使用幫助頁實現分析

使用幫助頁

• 實現效果
• 實現分析
  • Android 開發者從0到1釋出一個微信小程式的採坑過程——使用幫助頁面

提交反饋頁

• 實現效果
• 實現分析
  • 可參考之前寫的一篇博文 https://blog.csdn.net/ITxiaodong/article/details/84453989

4、釋出上線

釋出前的測試

• 開發版

新增更多管理員，可以進行測試。

• 體驗版

提交到管理後臺後可以設定為體驗版，擁有體驗許可權的使用者可以進行使用。

可在下方的面板中進行設定

稽核被拒如何巧妙繞過

現在稽核週期大概在兩天左右，週末也會稽核。

• 解決思路

有時候我們開發的專案不屬於個人開發專案的範圍，那麼如何才能上線了，網上有解決辦法，就是通過後臺返回的數值決定顯示的頁面。

• 解決辦法

通過雲資料庫，或者自己通過伺服器介面來改變

• 實現分析
  • Android 開發者從0到1釋出一個微信小程式的採坑過程——釋出上線後動態切換頁面

歡迎老鐵掃碼體驗一波