前言:

适者生存,雨露均沾,本次要讲述的是我从零开发完整微信小程序的经验分享,微信小程序的作品:请搜索小程序:半个大夫。也可以关注微信服务号:半个医生。小程序已经绑定到该服务号。
注:小程序语言是: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相关技术的文章,有兴趣的朋友们敬请关注!感谢大家阅读。

本文固定链接: http://www.js-code.com/weixin/weixin_45718.html