1 背景
微信小程序刚出来的时候就想玩玩了,个人开发者开放了,终于可以玩玩了~
2 账号相关
注册账号跟着文档来就好了,文档请看这里。https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html
微信的文档还是很不错的,值得学习。
3 通过文档整体理解
我把微信小程序当做一个框架来探索,因为它的基本语法还是前端,因此对我(前端)来说,并不是一门新的语言。
因此,我认为把它作为一个框架更加合适。
以下是我在通读微信小程序的官方文档之后的一些理解。
3.1 完整&独立的开发体验
虽然我把它当做一个框架来体验,但是对于微信小程序本来说,它还是一个新语言:
它只是用了前端语法,但是它同时又不是完全的前端语法:
- 比如 wxml 是使用自己的标签组件
- 比如它的 wxss 只是 css 的子集
- 比如它的 js 没有 window对象等等
因此,作为一门新语言,它该有的东西实际上都有了,比如:
- 文档
- 编辑器
- 调试器
- 编译器
- 基础库
实际上,开发者不需要有任何的基础,就可以上手开发微信小程序,当然,如果有前端开发经验的话,上手就会更快
3.2 完整的框架
注意,我说的是框架,并不是组件库,一个微信小程序包含以下内容:
- App,单例
- Pages,多个页面,一个 App 包含多个 Page
- components,组件 ,每个 Page 都是由 component 组成,微信有自己的组件库
- App 和 Page 都有
可理解
的生命周期
3.3 类 Vue 的语法
微信小程序这个框架和 Vue 实在是太像太像了,知道 Vue 的,做过微信小程序都应该会有这种感觉。
- 数据双向绑定
- 模板语法
3.4 类 React Native 的开发体验
同时微信小程序和 React Native 很像,那就是只能使用框架底层提供的基础组件库。
这个基础组件库的底层原理应该也差不多,都是对不同 mobileOS 的底层进行抽象封装,实际上,它们俩有很多组件都是一样的,不是吗?
3.5 缺点
- 目前限制很多,就像开发微信公众号那样,权限限制比较严格,实际上很多开放接口也就是微信公众号的接口了。
- 无法自定义扩展。
肯定还会有许多缺点,但是笔者还没开发过,所以肯定是不知道的了。
4 简单的小栗子
作为腾讯课堂的前端开发一枚,举栗子当然要用自家产品啦,下面简单实现一个类目首页的小程序。
内容很简单,同样的,代码也很简单。
4.1 创建项目
创建项目的时候,就不要勾选默认的 quick start 项目啦,我们从空项目开始,但是一些内容倒是可以借鉴的~
4.2 注册 App
在根目录,新建app.js
和app.json
,内容如下:
app.js
内容很简单,其实注册 App 的时候根本就不需要任何内容,因为我们不需要用到 App 的生命周期方法和全局数据。
我会告诉你这只是用来测试程序能不能跑起来吗?
app.json
是从 quick start 项目 copy 过来改改的,"page" 就改了 detail 页面,就是详情页啦,"window" 就改了导航的文案。
4.3 注册首页 index
新建 pages
文件夹,然后新建 index
文件夹,然后只要在 /app.json 的 "pages" 里面,添加 "pages/index/index"。
Ctrl s
保存,编辑器就会自动帮我们生成一个页面的基本文件结构啦:index.js
、index.json
、index.wxml
、index.wxss
首先我们先写页面结构 index.wxml
:
页面很简单,就两个模块:热门课程模块 和 最新课程模块,都是课程页卡列表,课程页卡也很简单,就一个封面图和课程名称。
实际上课程页卡这里可以使用模块语法,但是作者偷懒了,更多高级语法文档都有写,这里只是简单的栗子
然后当然是页面样式 index.wxss
样式没什么好说的,都是 css 语法。
最后就是页面逻辑 index.js
页面逻辑也非常简单,写过 vue 的同学都很熟悉,页面渲染过程就是:
showLoading => request data => render => hideLoading
课程页卡的点击事件就是导航到详情页,同时把课程名称带上(原因后面再说)。
首页我们就搞定啦~
4.4 注册课程详情页 detail
和首页一样,创建好目录,在 /app.json 的 "pages" 添加页面路径保存即可。
然后同样的内容,直接看结果:
没错,作者又偷懒了,课程详情页就是只展示一个课程名称而已!
4.5 结果
Ctrl b
构建,查看调试就可以查看结果了:
就是这么简单~
5 开发体验小结
● 和 vue 太像了。
● 代码简洁,文档清晰。
● 在微信的编辑器里写代码不是很习惯,但是基本功能还是很齐全的,比如代码提示,代码格式化等等。
● 写 css 的时候直接用 rpx,自适应挺好用的。
扫码下方二维码,
随时关注更多前端干货文章!
▼
微信:IMWebTech