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

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

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

实现效果分析目录

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

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发布一个微信小程序的采坑过程——发布上线后动态切换页面

欢迎老铁扫码体验一波