微信小程序开发的完整人性化版攻略

前言：

适者生存，雨露均沾，本次要讲述的是我从零开发完整微信小程序的经验分享，微信小程序的作品：请搜索小程序：半个大夫。也可以关注微信服务号：半个医生。小程序已经绑定到该服务号。
注：小程序语言是：js，和一定的css基础，和些许的生命周期的概念，个人觉得有移动端开发经验加前端开发经验可以非常顺利开发，言归正传，Let's go（注意腾讯虽然已经有现成的教程了，我这里是快速的概括，开发注意事项）

正文：

创建流程

1.获取微信小程序的AppID
登录 https://mp.weixin.qq.com ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了
2.下载开发工具
自行下载 微信开发者工具
3.工程结构概括

最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。其他文件件我也简单的介绍一下，这里讲的是一个工程结构设计的一种推荐方案，
common文件夹是放一些公共的wxss，用于复用和统一管理。
components文件夹是放template模板，组件化。
config文件夹是放工程的一些配置，如服务端的地址，和图片服务器的地址
pages文件夹是放小程序的模块界面了
resources文件夹本该放小程序需要的一些资源，如图片之类的，但是因为微信小程序很多图片场景都不能直接使用本地的图片，所以所有的图片，都存放在服务端，一方面可以减少打包的小程序的包大小，一方面也可以方便管理。
service文件夹是放跟服务端的https接口交互的方法，可以理解为接口api
utils文件夹是放一些工具类js，和封装的http类等
views文件夹里面是空的，没有删掉，哈哈哈?

开发套路

小程序的js的导入是require所需的其他js文件。
wxss的导入是@import所需的其他wxss文件。
wxml的导入是import所需的其他wxml文件。
有些需要全局共用的就放入app.js中和app.wxss中。
小程序有多少个界面和tabBar配置，配置在app.json里面。
这里对于以前开发移动端的人来说，要关心的wxss的书写，以及wxml的布局，和一些js的编写（至于那些生命周期，看一眼就会了，就是在不同的情况下，会触发各不同的生命周期对应的方法，然后将自己需要处理的逻辑写入到对应的生命周期方法中）。
对以前开发前端的人来说，布局，样式什么的应该是毫无压力。多花点时间去了解，生命周期的使用。
小程序是数据渲染界面的模式（数据绑定），所以只要控制到js中的data里面的数据对象，就可以动态渲染界面了

初步学习阶段

在知道小程序是有多个界面拼在一起组成的之后，那我们可以开始学习的第一步了，熟悉小程序可以用的组件，或者叫标签。这里就不重复多余介绍，直接有兴趣看组件传送门，这些都是小程序提供的基础组件，我们的wxml布局可以使用这些基础组件来构建我们的界面结构。了解的点就是那些组件的属性，和事件。事件就是我们可以在这些组件上做什么动作，做这些动作，我们可以触发什么方法。（这里跟我们开始学app开发很像，从组件开始）

学习进阶阶段

我们可以到这里有几个生命周期的方法，我不准备过多的介绍每个方法对应的是什么时候，之间第一个onLoad方法，里面有个参数options参数，这个参数是用来接收他上个界面传递过来的参数的，上个界面传递的方法如

    wx.navigateTo({
      url:"/pages/symptom/symptomsChoose/symptomsChoose?symptomWord="+symptomName
    });

这样就可以在下个界面的options里面拿到symptomWord这个参数，也是类似app的方式。
在这个js里面我们需要做的事情，就是设置好data来渲染wxml,配置好事件方法，来配合组件的事件来使用。

然后我们要开始写wxml布局的时候，不可避免的就是if else，for循环等逻辑渲染的操作，这些小程序都有对应的写法如wx:if, wx:for也是非常的简单的

推荐方案一

如果遇到需要切换图片环境的时候，修改引用的图片，写在wxss中是不合适的，推荐写在style里面种如：

<view style="background: url({{serviceImageUrl}}bg_weather_onloading.png) no-repeat;background-size: 100% 100%;"></view>

js动态修改serviceImageUrl这个data的数据对象即可。

推荐方案二

为了更好的适配各种机型，在wxss尽量都使用rpx来编写单位，小程序会帮我们处理好了各种适配

服务端

小程序只认可https请求，所以需要服务端需要配置ssl证书，来提供https的支持，可以去百度腾讯ssl证书，找一找就可以了

总结：

其实个人觉得小程序的开发门槛偏低，重点就是样式会写，然后基本的规则按照小程序规定的配置，然后在wxml画出界面的结构，然后，在js中配置上他渲染的数据data和事件的触发方法的实现，然后知道界面的如果跳转，如何传参数。基本上就算是可以开发一个微信小程序了。会开发也算多会一门小技术吧，也是好事，祝各位学习快乐。这文章也是自己的一个小总结，后续会不间断的发表关于Android，微信，iOS，Java相关技术的文章，有兴趣的朋友们敬请关注！感谢大家阅读。