微信小程序
定义:微信里面app,2016年推出,竞品:支付宝,钉钉,美团,抖音,qq,头条
优点:在微信自由分享,不用下载,能快速的开发,使用微信的api接口
开发者:内存,源码,图片,存储,接口与数据都有
网址
下载微信小程序开发工具:https://servicewechat.com/wxa-dev-logic/download_redirect?type=win32_x64&from=mpwiki&download_version=1062210310&version_type=1
注册一个微信小程序:https://mp.weixin.qq.com/
- 新建项目
- 界面介绍
- 项目组成
- page.json:pages注册页面,window:窗口信息
新建页面:
在pages文件夹右键建立新的文件夹
在文件右键新建页面Page
哪个page在最上面,默认显示哪页
json要求严格语法,不能有多余的注释和逗号
特别注意
页面组件pages/home
home.wxml:模板文件
home.js:业务逻辑
home.wxss:样式
home.json:页面配置
内置组件
view块组件,text行内组件,button按钮组件,input表单组件
小程序的模板语法约等于vue的模板语法
文本是在home.wxml,样式在home.wxss里面
文本渲染
{{msg}}
可以执行简单的js表达式
{{2+3}}
{{msg.length}}
{{msg.length>5?"大于":"小于"}}
条件渲染
wx:if=""
wx:elif=""
wx:else
列表渲染
wx:for="{{list}}"
wx:key="index"
{{item}}
{{index}}
自定义列表渲染
定义item J与index的名称
wx:for="{{list}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}
模板渲染
import只能导入template内容
include只能导入非template内容
事件
bindinput表单输入时
bindconfirm表单输入确认
bindtap按钮点击时
事件的传参
<button data-msg=“xxx" bindtap=“tapHd”">
获取事件的参数
表单的绑定
表单的值获取:e.detail.value
内置的api
1.显示提示 wx.showToast({})
2.本地存储 wx.setStorageSync(key,value)
3.本地取 wx.getStorageSync(key)
4.打开地图选择位置 wx.chooseLocation ({ })
5.获取设备电量 wx.getBatteryInfoSync ({ })
6.网络请求 wx.request()
生命周期
on Load页面加载完毕
onPullDownRefresh下拉刷新
onReachBotton触底更新
更新数据与视图
this.setDate({k:v})
允许下拉和刷新
页面配置
页面跳转
<navigator open-type="navigate" url="跳转的地址">普通跳转</navigator>
<navigator open-type="redirect" url="跳转的地址">重定向</navigator>
<navigator open-type="reLaunch" url="跳转的地址">关闭所有页面,打开到应用内的某个页面</navigator>
<navigator open-type="navigateBack">返回</navigator>
<navigator open-type="switchTab" url="跳转的地址"跳转底部栏</navigator>
api跳转
wx.navigateTo跳转
wx.switchTab切换底部栏
wx.redirect重定向
wx.reLaunch重启
页面栈
页面传参
小程序页面传参主要通过查询传参:
全局数据
app.js的globalDate
定义app.js的globalData
页面使用
var app=getApp();
app.globalData.num
底部导航栏
"tabBar": {
"color": "#ccc", //字体颜色
"selectedColor": "#000", //选中时导航栏
"borderStyle": "white", //边框颜色
"backgroundColor": "#fff", //背景颜色
"list": [
{
"pagePath": "pages/yidian/yidian", //跳转路径
"iconPath": "images/t1.png", //未选中时图标
"selectedIconPath": "images/t1-h.png", //选中时的图标
"text": "导航1" //图标下方文字
},
{
"pagePath": "pages/todo/todo",
"iconPath": "images/t2.png",
"selectedIconPath": "images/t2-h.png",
"text": "导航2"
}
},
//最少2个,最多5个
封装request
1.定义baseURL
2.添加请求头
3.添加加载提示
4.同一错误处理
使用npm安装VantWeapp
- 初始化安装插件
- app.json删除v2
- 修改project.config.js
- 工具,构建npm
- 导入组件
- 使用组件