本文通过具体的实例记录微信小程序的入门知识。
1、特点
- 不需要安装
- 依赖微信应用
- 更接近原生APP
- 丰富的框架及API可达到快速开发的目的
2、工具使用
在开发的过程中可以使用微信开发者工具，更加直观的进行调式及看到界面：下载地址
3、目录结构
pages：小程序页面，包括 js（页面逻辑），wxml（页面结构），wxss（页面样式）和 json（页面配置）
app.js：小程序公共逻辑
app.json：小程序公共配置
app.wxss：小城市公共样式
image.png
4、公共配置
window：设置默认页面的窗口表现，如图的顶部红色区域
image.png
"window":{
"navigationBarBackgroundColor": "#bc162c", // 导航栏背景颜色
"navigationBarTitleText": "初始微信小程序", // 导航栏标题文字内容
"navigationBarTextStyle":"white" // 导航栏标题颜色，仅支持 black/white
}
tabBar：设置小程序的tab最多5个，最少2个，如图的底部tab
image.png
"tabBar": {
"backgroundColor": "#bc162c", // 背景色
"color": "#8a8a8a", // 背景文字
"selectedColor":"#fff", // 高亮背景文字
"list": [
{
"pagePath": "pages/index/index", // 路由页面
"text": "首页", // 路由文字
"iconPath": "/images/home1.png", // 默认显示图标必须是图片81*81
"selectedIconPath": "/images/home.png" // 高亮显示图标
},
{
"pagePath": "pages/checkbox/checkbox",
"text": "选择框",
"iconPath": "/images/select.png",
"selectedIconPath": "/images/select.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "/images/logs1.png",
"selectedIconPath": "/images/logs.png"
}
]
}
5、微信组件应用
微信小程序自带一些常规组件，包括轮播，表单组件等。
轮播图组件swiper
用于首页的轮播图显示，可以设置自动轮播和序号点
image.png
核心代码：
<!-- index.wxml -->
<swiper indicator-dots="indicatorDots"
indicator-color="#FFF"
indicator-active-color = "#bc162c"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
// index.js
Page({
data: {
imgUrls: [
'/images/vue.jpg',
'/images/angular.jpg',
'/images/react.jpg'
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000
}
})
/* index.wxss */
.slide-image{
width: 100%;
height: 300rpx;
}
可以看出，微信的组件开发和vue一样都是通过数据控制view层的，知识点：
双大括号：表示数据绑定，支持简单的表达式；
wx:for：表示列表渲染，使用item表示数组数据；使用index表示数组的下标；
data：放置变量的数据；
rpx：微信中的单位，rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx
可滚动组件scroll-view
用于显示多个模块的滚动显示
image.png
核心代码：
<!-- index.wxml -->
<scroll-view class="scroll-view" scroll-x="true">
<view class="scroll-view-item" wx:for="{{viewDatas}}">
<view class="view-item-title">
<text>{{item.title}}\n</text>
<text>￥{{item.price}}</text>
</view>
<image class="view-item-image" src="{{item.imgUrl}}"></image>
</view>
</scroll-view>
// index.js
viewDatas:[{
title:"使用AngularJS开发下一代Web应用",
price:"299.00",
imgUrl:"/images/10-min.png"
},{
title:"Vue+Webpack打造web应用",
price:"229.00",
imgUrl:"/images/2-min.png"
},{
title:"React知识点综合运用实例",
price:"329.00",
imgUrl:"/images/7-min.png"
},{
title:"微信小程序入门",
price:"99.00",
imgUrl:"/images/3-min.png"
}]
这里用到scroll-view组件，设置scroll-x="true"表示横向滚动。此时需要设置以下样式保证效果。
/* index.wxss */
.scroll-view {
display: flex;
width: 100%;
height: 285rpx;
white-space: nowrap;
box-sizing: border-box;
}
.scroll-view-item {
display: inline-block;
width: 685rpx;
height: 285rpx;
}
6、页面跳转
下面介绍点击【购买】按钮如何进入购买页面。
image.png
事件绑定
事件的类型即移动端的事件如touch类事件，tap事件，写法是以bind或catch开头，然后跟上事件的类型。其中，bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。比如下面的bindtap表示点击按钮。
<button type="warn" size="mini" bindtap="buyit data-id="{{item.id}}"">购买</button>
buyit(event){
console.log(event)
}
点击结果
image.png
分析：返回结果中包含event的各种信息，包括触摸点的位置，目标对象的dataset，可以通过data-的新形式定义模板，通过event.dataset获取值
跳转路由
微信小程序有栈的概念，跳转的方式有4种：
wx.navigateTo(options)：将原页面保存在页面栈中，由此进入的下个页面也会进栈，只有在这个情况下点击手机的返回按钮才可以重新跳转到上个页面；
wx.redirectTo(options)：清除栈，下一个页面进栈，无法通过返回按钮返回；
wx.switchTab(options)：同上，且跳转的页面必须是tabBar中声明的页面；
wx.navigateBack(options)：只能返回到页面栈中的指定页面，一般和navigateTo配合使用。
参数说明
image.png
因此我们可以使用wx.navigateTo的方法跳转到购买页面，并且获取到当前点击的条目的id，直接在url加上，通过url传参。
buyit(event) {
var id = event.currentTarget.dataset.id;
wx.navigateTo({
url: "/pages/buy/buy?id=" + id
})
}
进入购买页面
image.png
7、API请求
上面介绍的页面都是静态数据，下面介绍如何通过请求获得数据，以购买页面的课程详情为例说明。我将数据放在本地的一个环境下模拟接口返回数据：
33.png
请求API
wx.request(OBJECT)发起网络请求。主要参数说明
image.png
在前面，我们在点击【购买】按钮的时候在地址传入了一个id，真实环境中，我们会根据这个id来请求接口获取数据，那么问题来了：
1.什么时候请求接口？
2.如何获取地址中的id呢？
生命周期函数
微信小程序和vue一样拥有生命周期函数，微信提供的函数方法有：
image.png
因此解决问题1，我们可以在onLoad方法中请求接口。打印一下这个方法下的参数。
image.png
从打印的数据可以看到，微信很贴心的已经将路径中的参数传给我们了，解决问题2，实现请求：
<view class="buy-list-item" wx:for="{{buylist}}" wx:key="{{index}}">
<text>{{item.title}}</text>
<text>{{item.desc}}</text>
<view class="item-tip">
<image src="/images/play.png" />
<text>{{item.tip}}</text>
</view>
</view>
Page({
data:{
buylist:[]
},
onLoad(option){
let that = this;
wx.request({
url:'http://localhost:801/buylist.json',
data:{
id:option.id
},
success(res){
that.setData({
buylist:res.data
})
},
fail(err){
console.log(err)
}
})
}
})
微信小程序中通过setData的方法给data中的变量赋值
实现效果：
image.png
8、本地缓存
在前面的案例中我们通过url传参的形式实现组件之间的数据传递。还有一种方式就是可以使用本地缓存的形式。可以对本地缓存进行设置、获取和清理。同一个微信用户，同一个小程序 storage 上限为 10MB。
wx.setStorage(OBJECT) 设置缓存，异步接口
wx.setStorageSync(KEY,DATA) 设置缓存，同步接口
wx.getStorage(OBJECT) 获取缓存，同步接口
wx.getStorageSync(KEY)获取缓存，同步接口
wx.removeStorage(OBJECT)移除缓存，同步接口
wx.removeStorageSync(KEY)移除缓存，同步接口
wx.clearStorage() 清理全部本地缓存，同步接口
wx.clearStorageSync() 清理全部本地缓存，同步接口
同步参数说明
image.png
异步参数添加
image.png
9、总结
总的来说，小程序的简单应用跟其他的MVVM框架一样是通过数据操作视图层，组件化开发，提供各种内置的[API](https://developers.weixin.qq.com/miniprogram/dev/api/)，wxml文件不可写html标签而是用它自身封装的[组件](https://developers.weixin.qq.com/miniprogram/dev/component/)。
网友评论