Android 开发者从0到1发布一个微信小程序的采坑过程

柔光的暖阳◎ 2022-04-12 09:16 125阅读 0赞

> 需要代码可在文末扫码识别二维码，在我的----关于我—可找到我的联系方式。

# 小程序已发布，可在微信小程序中搜索找到，或者在文末找到小程序二维码体验一波 #

### 实现效果分析目录 ###

**[Android 开发者从0到1发布一个微信小程序的采坑过程——首页实现][Android _0_1]**  
**[Android 开发者从0到1发布一个微信小程序的采坑过程——详情页实现][Android _0_1 1]**  
**[Android 开发者从0到1发布一个微信小程序的采坑过程——使用帮助页面][Android _0_1 2]**  
**[Android 开发者从0到1发布一个微信小程序的采坑过程——发布上线后动态切换页面][Android _0_1 3]**

# 0、项目的目标和完成的情况 #

### 项目完成之后能学到什么： ###

1.  对 **原生小程序开发** 有一定的了解，并能利用原生技术实现简单的页面效果
2.  对 **HTML 和 CSS 以及JavaScript** 有一些了解。能够实现常见的 CSS 样式
3.  对 **小程序云开发** 有所了解，在没有后台的接口，甚至不用第三方的 API，也能实现一款小程序
4.  对 **小程序的发布上线** 有所了解，能达到独立开发一款小程序

### 完成的情况： ###

> 欢迎使用，并提出反馈意见

实现的效果如下：gif展示  
![lottery.gif][]

截图展示：  
![产品意见提交.png][.png]

![分享弹窗.png][.png 1]

![开奖详情页.png][.png 2]

![使用帮助页.png][.png 3]

![使用帮助页入口.png][.png 4]

![首页带有角标截图.png][.png 5]

# 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_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][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][https_developers.weixin.qq.com_miniprogram_dev_index.html_t_18111920]
 *  w3school 的 Html 、CSS 、JavaScript
    
     *  HTML：[http://www.w3school.com.cn/html/index.asp][http_www.w3school.com.cn_html_index.asp]
     *  CSS：[http://www.w3school.com.cn/css/index.asp][http_www.w3school.com.cn_css_index.asp]
     *  Javascript：[http://www.w3school.com.cn/js/index.asp][http_www.w3school.com.cn_js_index.asp]

### 开发工具推荐 ###

*  微信小程序原生开发工具
    
     *  [https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_devtools.html]
 *  Sublime Text 【实际运行还是用原生的开发工具】
    
     *  [http://www.sublimetext.com/3][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][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][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][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_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][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发布一个微信小程序的采坑过程——详情页实现][Android _0_1 1]**

## 个人页 ##

*  实现效果

该效果和使用帮助页是一样，所以可以参考下方的使用帮助页实现分析

## 使用帮助页 ##

*  实现效果
 *  实现分析
    
     *  **[Android 开发者从0到1发布一个微信小程序的采坑过程——使用帮助页面][Android _0_1 2]**

## 提交反馈页 ##

*  实现效果
 *  实现分析
    
     *  可参考之前写的一篇博文 [https://blog.csdn.net/ITxiaodong/article/details/84453989][https_blog.csdn.net_ITxiaodong_article_details_84453989]

# 4、发布上线 #

## 发布前的测试 ##

*  开发版

添加更多管理员，可以进行测试。

*  体验版

提交到管理后台后可以设置为体验版，拥有体验权限的用户可以进行使用。

可在下方的面板中进行设置  
![设置页面.png][.png 6]

## 审核被拒如何巧妙绕过 ##

> 现在审核周期大概在两天左右，周末也会审核。

*  解决思路

有时候我们开发的项目不属于个人开发项目的范围，那么如何才能上线了，网上有解决办法，就是通过后台返回的数值决定显示的页面。

*  解决办法

通过云数据库，或者自己通过服务器接口来改变

*  实现分析
    
     *  **[Android 开发者从0到1发布一个微信小程序的采坑过程——发布上线后动态切换页面][Android _0_1 3]**

> 欢迎老铁扫码体验一波

![图片][gh_db1837c63df7_344.jpg_thumbnail]

[Android _0_1]: https://blog.csdn.net/ITxiaodong/article/details/84350707
[Android _0_1 1]: https://blog.csdn.net/ITxiaodong/article/details/84404685
[Android _0_1 2]: https://blog.csdn.net/ITxiaodong/article/details/84477146
[Android _0_1 3]: https://blog.csdn.net/ITxiaodong/article/details/84679583
[lottery.gif]: /images/20220412/1254e03804214c41bf223207bf93bd79.png
[.png]: /images/20220412/16388800764641daa18d252d6319f7c9.png
[.png 1]: /images/20220412/57e0be9b56694d42b5fcd2b06a57e3d6.png
[.png 2]: /images/20220412/3ead7d5d98a5406898d651a6c7202cd9.png
[.png 3]: /images/20220412/b7c2bc87564844df86101f10f64e3a1e.png
[.png 4]: /images/20220412/22b363c651004b458f568a78c28ea49b.png
[.png 5]: /images/20220412/2831b79ed73942d4bad07063c594be4f.png
[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/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]: https://developers.weixin.qq.com/miniprogram/dev/#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7
[https_developers.weixin.qq.com_miniprogram_dev_index.html_t_18111920]: https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18111920
[http_www.w3school.com.cn_html_index.asp]: http://www.w3school.com.cn/html/index.asp
[http_www.w3school.com.cn_css_index.asp]: http://www.w3school.com.cn/css/index.asp
[http_www.w3school.com.cn_js_index.asp]: http://www.w3school.com.cn/js/index.asp
[https_developers.weixin.qq.com_miniprogram_dev_devtools_devtools.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
[http_www.sublimetext.com_3]: http://www.sublimetext.com/3
[https_developers.weixin.qq.com_miniprogram_dev_quickstart_basic_file.html_json-_E9_85_8D_E7_BD_AE]: https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#json-%E9%85%8D%E7%BD%AE
[https_developers.weixin.qq.com_miniprogram_dev_quickstart_basic_file.html_wxml-_E6_A8_A1_E6_9D_BF]: https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#wxml-%E6%A8%A1%E6%9D%BF
[https_developers.weixin.qq.com_miniprogram_dev_quickstart_basic_file.html_wxss-_E6_A0_B7_E5_BC_8F]: https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#wxss-%E6%A0%B7%E5%BC%8F
[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/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]: 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
[https_blog.csdn.net_ITxiaodong_article_details_84453989]: https://blog.csdn.net/ITxiaodong/article/details/84453989
[.png 6]: /images/20220412/d8f0b8d05f8b4690a0bc925cfe40a22f.png
[gh_db1837c63df7_344.jpg_thumbnail]: https://images-cdn.shimo.im/Y7FOv9DNNqQRq6Ix/gh_db1837c63df7_344.jpg!thumbnail