概念
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。
可以理解成一套嵌套在微信里面的app，和原生app不同的是不需要下载，属于小而轻的应用。
开发前的准备
1、注册账号
2、下载开发者工具, 下载1.02.1801081这个版本的，最新版的有bug，编译的时候调试器Wxml窗口会出现空的page标签，里面没有内容。编辑器内复制也会偶尔失效。
下载版本
3、注册好后登录下微信公众平台，在设置里找到开发设置，把appID保存下来，一会开发的时候需要用到
appID
快速开始
1、此时，工具有了，ID有了，接下来开始我们的撸码之旅。打开开发者工具，扫码登录后选择小程序项目，点击右下角的加号，创建新项目，选择项目目录，填写appID，项目名称，写好后点击确定。
小程序管理
填写信息
2、确定以后，默认打开后，发现给我们创建了一些代码，代码一会我们再讲。
目录.png
页面是空白的，打开调试器后发现页面有报错，如下
image.png
点击右上角的详情，修改下配置，把调试基础库改成1.9.1，然后把不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书勾选上，不然我们的请求就必须得是https的了
修改配置
3、此时控制台没有报错了，页面展示如下，点击按钮，我们可以看到微信授权，点击允许，我们的头像和昵称就显示在页面上了
页面展示.png
用户信息展示
项目结构
我们主要看app.js、app.json、app.wxss三个文件和pages文件夹里面的wxml
1、app.js做为小程序的入口，里面有个App实例，每个小程序只会有一个App实例，小程序启动以后触发onLaunch函数执行，获取用户信息
2、app.json是小程序的所有全局配置，pages字段放置所有页面的路径，window字段定义所有页面的顶部背景颜色，文字颜色 详细配置请戳这里👇
3、app.wxss文件就是页面公用的样式，仅支持部分css选择器
4、wxml就是我们的HTML文件，常用标签为 view 、text 等，没有所谓的div、span、p一类的标签了，我们习惯称它们为组件
设计理念
小程序内部可以理解成一个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，这里列举两个常用的，详细请戳👇这里
1、wx.navigateTo 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面
wx.navigateTo({url:`/pages/text/index?text=${121212}`})
2、wx.redirectTo 关闭当前页面，跳转到应用内的某个页面
wx.navigateTo({url:`/pages/text/index?text=${121212}`})
通过上面的API跳转带的参数，在页面上我们需要怎么获取呢？
// text.js
Page({
data:{
... // 页面数据
},
onLoad(options){
console.log(options.text) // 121212 获取上个页面带过来的值
}
})
数据过滤 过滤器
如果你使用过vue、angular框架，对|管道符肯定不陌生，它用来对我们的数据进行转换，那小程序里面有没有过滤器呢，不过这个是真没有。
但是目前有两种方法，可以实现过滤。
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 属性
1、wxs可以写在wxml里面的wxs标签里和.wxs文件里
2、wxs文件中引入其他wxs文件时候，可以使用require函数，接受相对路径
3、在wxml标签里使用外部wxs文件的时候，src属性是相对路径
tip
1、使用sass写wxss文件，在目录下创建index.scss文件，当前目录下执行 sass --watch index.scss:index.wxss --style expanded
2、wcss 文件里面不能使用本地图片，请使用base64、网上图片或者image
3、修改页面的背景，类似与css中设置body，可以直接设置page
4、不要直接操作this.data,使用this.setData函数，切记、切记
网友评论