工作需要，入手了一发小程序。由于有前端开发的经验，所以入门还是很轻松的。
本文简单聊下个人对小程序的一些看法。
PS：这里不会去做小程序文档的搬运工，只是一些整理。
安装
语法
小程序提供了以 JSON WXSS WXML js 四种开发语言组成的开发方案。
其实 WXSS 就是 CSS；而 WXML 则类似于 HTML。不同之处就是 WXML 提供的标签与 HTML 不一样，使用的都是小程序所提供的组件。而 JSON 和 JS 使我们所熟悉的开发语言了。
所以总结下各个开发语言的功能就是：
- JSON 用于配置小程序的路由、外部页面样式、标题等。
- WXML 用于搭建小程序页面结构。
- WXSS 用于设计小程序页面样式。
- JS 用于处理小程序中各种逻辑。
其实，微信的很多写法都参照了 React 和 Vue，举一些栗子：
数据绑定：
<view> {{ message }} </view>
列表渲染
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
点击事件
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
模板
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
是不是很像Vue~
而在JS部分，可以看看这个：
数据修改
this.setdata({
message: 'hello world'
})
类似 React 的 this.setState()。还有小程序的一系列生命周期和方法的定义（在page({})函数的对象中定义）都像极了 React。
OK！会Vue和React的童鞋语法这一关就算过了~
组件
小程序封装丰富的组件给开发者在WXML中使用。为何不用HTML呢，我想是因为想保持组件风格和稳定性。当然也提供了一些像地图、轮播等组件，算是方便了开发者去自己写这些常用的组件了吧。
文档在此，这部分就是看着文档写代码就好了，无非是各种属性和事件。没有什么难度~
API
其实个人觉得 API 才是小程序的真正强大之处。API涵盖了网络、媒体、文件、数据缓存、位置、设备、界面等各种功能，让小程序能够做各种 native 开发才能做到的事情。
大多数移动端会用到的业务场景小程序都能实现了，具体还得按照需求看文档解决具体问题啦~
调试
再聊聊微信开发者工具的调试工具，一开始以为就是一个 chrome 的调试台，之后看文档发现自己错了。
调试工具提供了以下功能：
- Wxml 显示 WXML 元素。
- Console 显示日志。
- Source 显示代码资源。
- Network 显示网络请求情况。
- AppData 显示小程序 data 数据。
- Storage 显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。
- Sensor 可以模拟地理位置和重力感应。
好好利用这套调试工具，能让开发事半功倍。
另外，配合上预览和远程调试，开发效率更佳！
预览和远程调试
最后
简单聊了聊小程序的一些东西。
从学习成本上，对于熟悉前端的童鞋，入手小程序非常简单，简单了解下，然后一边开发一边查组件和 API 文档即可搞定。
从开发效果上，基于完善的组件和强大的API，小程序可以实现的功能非常丰富。
以上就是本人入门小程序开发后的一些看法，希望能够对你有所帮助:)
打个广告
链家上海研发中心招聘前端、后端、测试。
机会不多，需要内推机会的请将简历发送至 dingxiaojie001@ke.com。
网友评论