前言
你需要在本地安装微信开发者工具,即集开发编译运行环境于一体的工具。
本项目技术栈基于 ES2015+、WXML、WXSS、JavaScript 、微信原生 API和云开发,所有的请求数据都使用云数据库的小程序端SDK进行查询,提前了解和学习这些知识会对使用本项目有很大的帮助。
接下来,我们一起大致梳理一下,本项目需要用到的一些技术基础知识,所谓删繁就简三秋树。
原生小程序框架
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
- 一个小程序主体部分由三个文件组成app.js、app.json、app.wxss,必须放在项目的根目录;
一个小程序页面由四个文件组成,分别是:js、wxml、json、wxss;
如下:└── miniprogram 小程序目录 ├── app.js 小程序全局入口 ├── app.json 小程序全局配置 ├── app.wxss 小程序全局样式 ├── pages 页面目录 │ │── index 首页 │ ├── index.wxml 页面结构 │ ├── index.js 页面逻辑 │ ├── index.json 页面配置 │ └── index.wxss 页面样式 └── image 图片资源
页面结构
模板语法WXML
view标签和text标签
我们现在做的是微信小程序,所以,要使用它的语法。WXML(WeiXin Markup Language)是微信小程序框架设计的一套标签语言。
注意!不要被官方的很官方的概念唬住了,其实就是简单的标签。不信,我们举个栗子类比看看。相信大多数小伙伴,即使没有做过开发的都听过,html的div和span。div => view span => text
view其实相当于div,都是块级元素,也就是会换行的;
text相当于span,都是行内元素,也就是不会换行的。
动手试试吧,在index.wxml直接使用这两个标签就明白了。马原 毛中特 思修 近代史
保姆级演示,明白了“view是块级元素,会换行的;text是行内元素,不会换行的”这句话了没?
或许我以后不会这么讲了,因为实在是太太太基础了。简单的事情,只说一遍。
不明白不要紧,就像公式,你不用知道是怎么来的,你只要记住公式是怎么用的就行了。
毕竟我们做的是应用层面的开发嘛,它提供什么API,知道怎么用的,然后直接去使用就行了。如果能举一反三,就更好了。
数据绑定
在js的data中定义变量:
data:{
title:"考研题库小程序",
num:50,
isLogin:true,
user:{
nickName:"姑苏洛言",
age:20
},
isChecked:true
}
在 wxml中 直接使用:
{{title}}
{{num}}
{{isLogin?'你好,xx会员':'请授权登录'}}
{{user.nickName}}
请先登录
昵称:{{user.nickName}},年龄{{user.age}}
再了解一下,其他一些基本运算。
{{a + b}}
Hidden
今日刷题挑战成功
今日刷题挑战失败
列表渲染
列表渲染,其实说白了就是我们说的数组循环。
列表渲染,关键字:
- wx:for
- wx:for-item
- wx:for-index
- wx:key
wx:for="{{list1}}"
wx:for-item="循环项的名字" => wx:for-item="item"
wx:for-index="索引项的名字" => wx:for-index="index""循环项的名字" 默认 = “item”
"索引项的名字" 默认 = “index”
值有两种:
1)当对数组对象做循环的时候:
list1:[{id:'1', name: '马原'},{id:'2', name: '毛中特'},{id:'3', name: '思修'},{id:'4', name: '近代史'}]
wx:key="id" => item.id
2) 当数组是普通数组:
list1: ['马原', '毛中特', '思修', '近代史']
wx:key="*this"
index.js
Page({
data: {
// 普通数组
list1: ['马原', '毛中特', '思修', '近代史'],
// 对象数组的循环
list2: [
{id:'1', name: '马原'},
{id:'2', name: '毛中特'},
{id:'3', name: '思修'},
{id:'4', name: '近代史'}
]
}
})
index.wxml
普通数组
{{index}} --- {{item}}
======================
对象数组
{{index}}:{{item.name}}--{{item.id}}
条件渲染
1)wx:if
if 、else、 else if 对应微信小程序模板语法分别为 wx:if、 wx:else、 wx:elif
1
2
3
2)hidden
在标签上直接加属性hidden。
3)什么场景下使用哪一个?
- 当标签不是频繁的切换显示,优先使用wx:if 直接把标签从页面结构给移除掉;
当表示频繁的切换显示,优先使用hiddem 通过添加样式的方式来切换显示。
事件的绑定
1)绑定事件通过 bind+事件名;
2)定义事件的回调需要放在 js文件和data同层级。
.wxml{{num}} .js
Page({ data: { num: 0 }, // 声明了点击事件的回调 handleTap() { let num = this.data.num; num++; this.setData({ num }) } })
原生组件
在考研刷题小程序中,常用的原生组件:view、text、image、button、radio、checkbox、swiper等。
view
视图容器,也就是块级元素。
text
文本标签,也就是行内元素。
1)text 组件内只支持 text 嵌套。
2)设置user-select属性,长按文本可选、复制。
3)可以对空格、回车进行解析显示。image
图片组件。
1)默认的宽度和默认的高度 320 * 240。
2)内置懒加载 lazy-load。
3)mode 渲染模式:- scaleToFill: 默认值。把图片内容,拉伸到相框的大小 。
- widthFix: 把图片变成了和以前web中的图片的渲染模式一样。web图片,当宽度改变的时候,高度会等比例的跟着改变。移动端开发 img width:100%。
- aspectFit: 等比例拉伸图片-内容,可能会导致,image相框留出空白。
aspectFill: 等比例拉伸图片-内容,图片的内容会被截取(图片内容会撑满相框)。
button
radio
checkbox
多选项目,属性和单选radio大概一致。在考研刷题小程序项目中用于多项选择题。
swiper
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
页面样式
层叠样式WXSS
WXSS( WeiXin Style Sheets )是⼀套样式语言,用于描述 WXML 的组件样式。 与 CSS 相比,WXSS 扩展的特性有:
- 响应式长度单位 rpx
样式导入
全局样式app.wxss
app.wxss是默认的全局样式 。把全局的样式的代码都写到这里:
page{ background-color: #ffffff; }
page 标签是页面最外层的标签。
样式语法
在wxss中 不支持 通配符
*
,所以当我们要实现以下效果的时候:*{ margin: 0; padding: 0; box-sizing: border-box; }
只能够单个标签一个一个的定义了。语法像这样写:
page,view,text{ margin: 0; padding: 0; box-sizing: border-box; }
rpx
小程序中的单位 rpx,功能和以前移动端的web中的
rem
类似 ,rpx
(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx
。
1)不管屏幕多宽 , 都是750rpx
;
2)不管手机屏幕多宽 都是 100% ;样式导入
当我们需要引用一个样式表文件时,通过@Import 引入,用的是相对路径。
@import "../../styles/common.wxss";
页面逻辑
生命周期
只是一个事件而已!! 只是会在特定的时候,会自动触发 。
分为两种:
- 应用的生命周期
app.js
; - 页面的生命周期 ;
一个微信小程序项目其实一个应用
,一个应用里面可以拥有多个页面
。
应用的生命周期
看看考研刷题小程序项目中的app.js:
App({
// 小程序在启动的时候 触发
onLaunch: function (options) {
// 当应用开始启动的时候,可以获取用户的一些信息
console.log("onLaunch");
},
// 小程序被展示 的时候触发
// 反复被触发
onShow: function (options) {
console.log("onShow");
},
// 小程序被隐藏的时候触发
onHide: function () {
console.log("onHide");
},
// 当应用出错了时候会 触发
// 在这里 捕获错误信息
// 把错误信息收集 - 发送ajax异步请求 发送到后台中
onError: function (msg) {
// msg :错误信息
console.log("onError");
console.log(msg);
},
// 当页面找不到了 就会触发了
onPageNotFound: function (options) {
},
// 应用的全局数据
globalData: {
title:"生命周期"
}
});
页面的生命周期
看看考研刷题小程序项目中的首页index.js:
Page({
data: {
},
// 页面开始加载的时候触发
// 发送异步请求 获取数据来渲染页面
onLoad: function(options) {
console.log("onLoad");
},
// 页面标签都渲染完毕 才触发
onReady: function() {
console.log("onReady");
},
// 页面被 显示 页面切换-页面路由
onShow: function() {
console.log("onShow");
},
// 页面被隐藏
onHide: function() {
console.log("onHide");
},
// 页面被 卸载的时候 - 当页面切换的时候 使用了不同的 open-type 会关闭当前页面的
onUnload: function() {
// 可以关闭一些定时任务
console.log("onUnload");
},
// 当页面 下拉刷新的时候触发
// 在全局配置或者 页面配置中 手动开启 下拉刷新!!!
onPullDownRefresh: function() {
console.log("onPullDownRefresh");
},
// 上拉页面 上拉加载下一页数据
onReachBottom: function() {
console.log("onReachBottom");
},
// 当页面被转发的时候
onShareAppMessage: function() {
console.log("onShareAppMessage");
},
// 页面被滚动的时候
onPageScroll: function() {
console.log("onPageScroll");
},
// 当点击tabbar的时候触发
onTabItemTap:function(item) {
}
});
页面路由
在小程序中所有页面的路由全部由框架进行管理。
注意事项:
- navigateTo, redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。
页面配置
全局配置app.json
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
以下是一个包含了部分常用配置选项的 app.json :{ "pages": [ "pages/index/index", "pages/test/test", "pages/result/result" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "护网专题信息安全知识竞答", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json" }
完整配置项说明请参考小程序全局配置。
页面的配置
每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
例如:{ "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "积分排名", "navigationBarTextStyle": "black" }
完整配置项说明请参考小程序页面配置。
API
小程序开发框架提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。
然而,这次我们在项目中,用到的主要是云开发 API。比如:add、get、update请求等。云开发 API
开通并使用微信云开发,即可使用云开发API,在小程序端直接调用服务端的云函数。
get请求代码示例:const db = wx.cloud.database(); db.collection('todos') .where({ _openid: 'xxx' // 填入当前用户 openid }) .get() .then(res => { console.log(res.data) })
调用云函数代码示例:
wx.cloud.callFunction({ // 云函数名称 name: 'cloudFunc', // 传给云函数的参数 data: { a: 1, b: 2, }, success: function(res) { console.log(res.result) // 示例 }, fail: console.error }) // 此外,云函数同样支持promise形式调用
小结
微信小程序使用了最新的前端技术栈,具有原生APP体验服务的小程序框架,小程序视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,响应的数据绑定,提供了丰富的基础组件和API以及能力。