啰里八嗦
昨天上班第一天, 没错, 是第一天公司今年放假很足, 撒泼的我无 (tian) 忧(bu)无 (zhi) 虑(chi)的度过了漫长的十一天, 上班了发现自己得了节后综合症, 这病严重吗? 嗯, 估计得有个礼拜才能痊愈
所以, 放假休闲的程序猿一定要感到深深的罪恶感, 为了啥? 为了不生病, 为了啥?
没出正月, 都在年里, 给大家拜个晚年, 祝大家晚年幸福
扯了会, 接下来咱们开始正文, 说点有用的
概念
小程序是一种不需要下载安装即可使用的应用, 它实现了应用触手可及的梦想, 用户扫一扫或者搜一下即可打开应用
可以理解成一套嵌套在微信里面的 app, 和原生 app 不同的是不需要下载, 属于小而轻的应用
开发前的准备
1 注册账号 2 下载开发者工具, 下载 1.02.1801081 这个版本的, 最新版的有 bug, 编译的时候调试器 Wxml 窗口会出现空的 page 标签, 里面没有内容编辑器内复制也会偶尔失效
3 注册好后登录下微信公众平台, 在设置里找到开发设置, 把 appID 保存下来, 一会开发的时候需要用到
快速开始
1 此时, 工具有了, ID 有了, 接下来开始我们的撸码之旅打开开发者工具, 扫码登录后选择小程序项目, 点击右下角的加号, 创建新项目, 选择项目目录, 填写 appID, 项目名称, 写好后点击确定
2 确定以后, 默认打开后, 发现给我们创建了一些代码, 代码一会我们再讲
页面是空白的, 打开调试器后发现页面有报错, 如下
点击右上角的详情, 修改下配置, 把调试基础库改成 1.9.1, 然后把
不校验安全域名 web-view 域名 TLS 版本以及 HTTPS 证书
勾选上, 不然我们的请求就必须得是 https 的了
3 此时控制台没有报错了, 页面展示如下, 点击按钮, 我们可以看到微信授权, 点击允许, 我们的头像和昵称就显示在页面上了
项目结构
我们主要看 app.jsapp.jsonapp.wxss 三个文件和 pages 文件夹里面的 wxml
1app.js 做为小程序的入口, 里面有个 App 实例, 每个小程序只会有一个 App 实例, 小程序启动以后触发 onLaunch 函数执行, 获取用户信息
2app.json 是小程序的所有全局配置, pages 字段放置所有页面的路径, window 字段定义所有页面的顶部背景颜色, 文字颜色 详细配置请戳这里
3app.wxss 文件就是页面公用的样式, 仅支持部分 CSS 选择器
4wxml 就是我们的 html 文件, 常用标签为 view text 等, 没有所谓的 divspanp 一类的标签了, 我们习惯称它们为组件
设计理念
小程序内部可以理解成一个 mvvm 的框架, 分为逻辑层和视图层, 逻辑层将数据进行处理后发送给视图层, 同时接受视图层的事件反馈
- // pages/test/index.js
- Page({
- data:{ // 页面的初始数据
- text: 'hello world'
- },
- onLoad(){
- console.log('hello')
- },
- change(){
- this.setData({
- text:'hello'
- })
- }
- })
使用 Page 函数来注册一个页面, 接收一个 Object 参数 这里我们使用了 onLoad 来监听页面的加载和定义了一个 change 函数 并使用 setData 函数将 text 的值进行更改
更改 data 数据的时候必须调用 setData 函数进行更改
- // pages/test/index.wxml
- <view>{{text}}</view> // 显示 hello world
- <button bindtap="change">点击更改上面文字</button> // 显示 hello
我们在 button 组件上添加了点击事件, 调用了 change 函数, 完整事件请戳这里
事件传递参数
有时候我们需要触发事件的时候, 传递一些参数, 那小程序怎么传递呢? 很不幸, 小程序不能类似 js 里面直接传递, 往往我们需要将传递的数据绑定到事件元素上
- // index.wxml
- <button data-test="哈哈" bindtap="change">点击我</button>
使用
e.currentTarget.dataset
来获取值
- // index.js
- change(e){
- e.currentTarget.dataset.test // 哈哈
- }
setData 函数拓展
1 修改嵌套多层的数据, 如果是写死的参数可以使用引号将参数包起来
- this.setData({
- 'text.msg': 'hello'
- })
如果是传递进来的值呢? 很简单将 data 的 key 用 [] 括起来
- // index.wxml
- <button bindtap="change" data-key="text.msg">点击我</button>
- // index.js
- change(e){
- var key = e.currentTarget.dataset.key
- this.setData({
- key: 'hello' // 数据不会更改
- // [key]: 'hello' // 数据会更改
- })
- }
路由
小程序里面所有的页面路由由框架进行管理
我们可以使用 getCurrnetPages 函数获取当前页面栈的实例, 返回一个数组, 最后一个元素为当前页面
小程序定义了五个用于导航跳转的 API, 这里列举两个常用的, 详细请戳这里
1wx.navigateTo 保留当前页面, 跳转到应用内的某个页面, 使用 wx.navigateBack 可以返回到原页面
wx.navigateTo({url:`/pages/text/index?text=${121212}`})
2wx.redirectTo 关闭当前页面, 跳转到应用内的某个页面
wx.navigateTo({url:`/pages/text/index?text=${121212}`})
通过上面的 API 跳转带的参数, 在页面上我们需要怎么获取呢?
- // text.js
- Page({
- data:{
- ... // 页面数据
- },
- onLoad(options){
- console.log(options.text) // 121212 获取上个页面带过来的值
- }
- })
数据过滤 过滤器
如果你使用过 vueangular 框架, 对 | 管道符肯定不陌生, 它用来对我们的数据进行转换, 那小程序里面有没有过滤器呢, 不过这个是真没有
但是目前有两种方法, 可以实现过滤
1 获取数据的时候, 直接改了, 干脆利落好不优雅 2 使用最后我们要介绍的 wxs
WXS
WXS 是小程序的一套脚本语言, 首先和 js 是不同的语言, 其次运行环境和 js 也是隔离开的, wxs 不能调用 js 文件中的函数, 也不能调用小程序的 API, 它主要用来增强 wxml
wxs 不能使用 es6 语法, 人家不是 js 啦
接下来我们来实现一个使用 wxs 实现一个简单的过滤器 1 首先我们创建 filter.wxs 文件并写入以下内容
- // filter.wxs
- var Filter = {
- getSatusStr: function(num){
- var str = '';
- switch (num) {
- case 0:
- string = '我是 0 的状态'
- break;
- case 1:
- string = '我是 1 的状态'
- break;
- default:
- string = '我是默认的状态'
- break;
- }
- return str
- }
- }
- module.exports = {
- status: Filter.getSatusStr
- }
同级下 index.wxml 使用
- <wxs module="filter" src="./filter.wxs"></wxs>
- <view wx:for="{{list}}">
- <view>{{filter.status(item.status)}}</view>
- </view>
总结: 1 每个 wxs 标签都有一个 module 属性 1wxs 可以写在 wxml 里面的 wxs 标签里和. wxs 文件里 2wxs 文件中引入其他 wxs 文件时候, 可以使用 require 函数, 接受相对路径 3 在 wxml 标签里使用外部 wxs 文件的时候, src 属性是相对路径
tip
1 使用 sass 写 wxss 文件, 在目录下创建 index.scss 文件, 当前目录下执行
sass --watch index.scss:index.wxss --style expanded
2wcss 文件里面不能使用本地图片, 请使用 base64 网上图片或者 image
3 修改页面的背景, 类似与 css 中设置 body, 可以直接设置 page
4 不要直接操作 this.data, 使用 this.setData 函数, 切记切记
来源: https://juejin.im/post/5a950848f265da4e8a32172a