小程序入门之旅

阳光穿透心脏的1/2处 2023-06-27 12:39 7阅读 0赞

继前期比对了微信衍生的三款产品，对于程序猿的我，肯定是对小程序最感兴趣的，最近也玩起了小程序。如果大家也对它感兴趣，就一起开启小程序的入门之旅吧。

—

工具篇

首先，在本篇就忽略该操作可以参考微信公众号简易教程，https://mp.weixin.qq.com/debug/wxadoc/dev/，描述了申请小程序的过程。

期次，可以把自己写好的demo用微信开发工具打开，小程序对于会前端开发的同事，工具使用起来会有一种似曾相识的感觉（是不是简化版的SublimeText和谷歌浏览器的结合体？![format_png][]）。

该工具还提供了上传（上传到腾讯云服务器），测试（生成性能测试报告）    等功能。

![format_png 1][]

—

架构篇

微信小程序，架构很简单，如下图看到（图中1,2,3,4,5分别对应下面的五点讲解）。

1.app.js 主要是全局公共的js方法声明及调用所在的文件

2.app.json 是小程序整个的配置文件，所以有的页面都在要此注册，不然不允许访问

3.app.wxss 是小程序全局的css文件，公共css写在此最好不过的了

4.pages下是对应着所有页面，每个页面，可以添加四种类型的文件，.json，.wxss，.wxml，.js

5.utils 是我们公共的js存放的地方，因为微信小程序要求，每个js文件里的方法不可以直接引用或调用，必须要用 module.exports方法导出，这样pages 下的.js文件才可以调用到我们在此写的js方法。

![format_png 2][]

—

组件篇

前端界面的渲染，应用的是ES6的思想，通过组件化的方式渲染出来的。界面层.wxml，不关注数据如何来的，只是做一个架构。实际逻辑及数据填充，通过.js来做数据处理。

另外.json，对应页面的配置文件。.wxss及对应css样式处理文件。

举个栗子，如下图所示，动态实现图片切换，首先在.wxml中，搭建swiper组件框架。具体数据如何填充，该页面不管：

<swiper indicator-dots="\{ \{indicatorDots\}\}"

autoplay="\{ \{autoplay\}\}" interval="\{ \{interval\}\}" duration="\{ \{duration\}\}">

<swiper-item>

</view>

</view>

</swiper-item>

</block>

</swiper>

其次，在.js对类似\{ \{autoplay\}\}的数据进行组装处理：

Page(\{

data: \{

...

background: \['demo-text-1', 'demo-text-2'\],

indicatorDots: true,//是否显示小圆点。

vertical: false,

autoplay: true,//是否自动播放。

interval: 500,//每张图片间隔时间

duration: 100//每张图片停留时间。

\},

![format_png 3][]

![format_png 4][]![format_png 4][]结束![format_png 5][]![format_png 5][]

--------------------

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXMud3gucXEuY29tL21wcmVzL2h0bWxlZGl0aW9uL2ltYWdlcy9pY29uL2NvbW1vbi9lbW90aW9uX3BhbmVsL3NtaWxleS9zbWlsZXlfMjAucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9veEFIZXdhTDJyaWFLVjJMdHp4dW5JNllYVDF1VjJJc3lsRVgzdlBlOUVjR1lWMUZLcjNkV09pY0VZNk1waWFpY2JpY1hOVWliT2NzTDdSVUo1TmMxRmljbk5ldXcvMA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9veEFIZXdhTDJyaWFLVjJMdHp4dW5JNllYVDF1VjJJc3lJWHZCckJaUE5oY2s1aWMyckZOQmZCVUVpYVh0Q2JDRU9jSUNaaWFHVm1DY2liMXR1ZEVGRW4xcm5RLzA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9veEFIZXdhTDJyaWFLVjJMdHp4dW5JNllYVDF1VjJJc3k4RzJqeVF1QmlicU5nTFNJTTlzZ3c1WVJWN1RSTzVLTjdtUW56RG5jQ1BjRFZpYjdpYkc2MjdjOVEvMA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXMud3gucXEuY29tL21wcmVzL2h0bWxlZGl0aW9uL2ltYWdlcy9pY29uL2NvbW1vbi9lbW90aW9uX3BhbmVsL2Vtb2ppX3d4LzJfMDYucG5n?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXMud3gucXEuY29tL21wcmVzL2h0bWxlZGl0aW9uL2ltYWdlcy9pY29uL2NvbW1vbi9lbW90aW9uX3BhbmVsL3NtaWxleS9zbWlsZXlfODQucG5n?x-oss-process=image/format,png