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

发布时间:2019-06-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序开发的完整人性化版攻略脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前言:

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

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序开发的完整人性化版攻略全部内容,希望文章能够帮你解决微信小程序开发的完整人性化版攻略所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。