微信小程序快速入坑指北

工作需要，入手了一发小程序。由于有前端开发的经验，所以入门还是很轻松的。
本文简单聊下个人对小程序的一些看法。

PS：这里不会去做小程序文档的搬运工，只是一些整理。

安装

• 建议注册一个小程序账号，获取appid便于手机扫码远程调试。
• 安装微信开发者工具，使用微信登陆~
• 新建微信小程序，输入appid（便于调试）,就可以开学的玩耍了。

语法

小程序提供了以 JSON WXSS WXML js 四种开发语言组成的开发方案。
其实 WXSS 就是 CSS；而 WXML 则类似于 HTML。不同之处就是 WXML 提供的标签与 HTML 不一样，使用的都是小程序所提供的组件。而 JSON 和 JS 使我们所熟悉的开发语言了。
所以总结下各个开发语言的功能就是：

• JSON 用于配置小程序的路由、外部页面样式、标题等。
• WXML 用于搭建小程序页面结构。
• WXSS 用于设计小程序页面样式。
• JS 用于处理小程序中各种逻辑。

其实，微信的很多写法都参照了 React 和 Vue，举一些栗子：
数据绑定：

 {{ message }} 

列表渲染

  {{idx}}: {{itemName.message}}

点击事件

 Click me! 

模板

是不是很像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，小程序可以实现的功能非常丰富。

以上就是本人入门小程序开发后的一些看法，希望能够对你有所帮助:)

打个广告

链家上海研发中心招聘前端、后端、测试。
机会不多，需要内推机会的请将简历发送至 [email protected]。