小程序
小程序的模块语法
文本渲染
{{msg}}
条件渲染
wx:if=""
wx:elif=""
wx:else
列表渲染
wx:for="{{list}}" {{item}}{{index}}
wx:key="index"
自定义列表渲染
定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
导入（不常用）
import
只能导入template内容
template/utils.wxml
<template name="userCart">
用户名：{{name}}
</temlate>
home.wxml
include
只能导入非template内容
template/foot.wxml
home.wxml
页面组件
.wxml 模块文件
.js 业务逻辑
.wxss 样式
.json 页面配置
内置组件
view组件 块组件
text组件 行内组件
button组件 按钮
input组件 表单
wxss
默认单位是rpx
750rpx等于一个屏幕的宽
375就是50%的宽
事件
bindinput
表单输入时
bindconfirm
表单输入确认
bindtap
点击时候
事件的传参
<button data-msg="xxx" bindtap="tapHd"></button>
获取事件的参数
e.target.dataset.msg
表单的绑定
<input value="{{s1}}" bindinput="inputHd">
inputHd(e){
this.setData({s1:e.detail.value})
}
表单的值获取
e.detail.value
内置的api
-
显示提示
wx.showToast({}) -
本地存储
wx.setStorageSync(key,value) -
本地取
wx.getStorageSync(key) -
打开地图选择位置
wx.chooseLocation （{ }） -
获取设备电量
wx.getBatteryInfoSync （{ }） -
网络请求
wx.request（）
更新数据与试图
this.setData{{k:v}}
todo
设计数据
list存储数据
done:true,是否完成
title：”“显示的文本
}```
temp 和输入框进行双向绑定的临时数据
页面配置
"enablePullDownRetresh":true 允许下拉刷新
"backgroundTextStyle":"dark" 背景文字颜色
"backgroundColor":"#f70"背景颜色
"usingComponents":{}组件
小程序的限制
源文件的大小
每个包不能超过2M
总共不能超过16-20M
页面缓存堆栈5层
底部栏
最少2个最多5个
底部栏图片31K
本地存储
1次1M最多100M
setData
不能超过1M
功能和微信一致
小程序的页面跳转
组件跳转
url 跳转的地址
open-type 打开类型 默认navigate 返回navigateBack 重定向 redirect 跳转底部栏switchTab 重启reLaunch
api跳转
wx.navigateTo 跳转
wx.switchTab 切换底部栏
wx.redirect 重定向
wx.reLaunch 重启
页面栈
最多存储ABCDE五个页面
通过open-type = "navigate"页面会缓存起来 最多缓存5层
A页面->redirect B页面
A页面是不会被缓存
E 页面 "navigateBack" 到 D页面 （页面的缓存移除一次）
总结：navigate会增加一层缓存页面
redirect 会替换一层缓存页面
navigateBack 会移除一层缓存页面
页面传参
小程序页面传参主要通过 查询传参
传：url=“xxxx/xxx?name=mumu&age=18”
接收：onLoad option参数接收
options.name
options.age
全局数据
app.js的globalData
定义 app.js的globalData
页面使用 var app = getApp(); ``app.globalData.num
小程序的生命周期
封装request
-
定义
baseURL -
添加请求头
-
添加加载提示
-
错误处理
// 基础的url
const URL = {
baseURL:"http://dida100.com"
}
// {name:"mumu",age:18} => name=mumu&age=18
function tansParams(obj){
var str = "";
for(var k in obj){
str+=k+"="+obj[k]+"&";
}
//移除最后一个&
return str.slice(0,-1);
}
function request(option){
var url = option.url;
// 01 可以添加baseURL
// 是不是以http开头的，是用url不是加上baseURL
url = url.startsWith("http")?url:URL.baseURL+url;
// 选项里面有params（get传入的参数）
if(option.params){
// 如果有参数，把参数转换为url编码形式加入
url+="?"+tansParams(option.params);
}
// 02 可以添加请求头
var header = option.header||{};
header.Authorization ="Bearer "+wx.getStorageSync('token');
// 03 可以添加加载提示
if(option.loading){
wx.showToast({
title: option.loading.title,
icon:option.loading.icon,
})
}
// 返回一个promise
return new Promise((resolve,reject)=>{
wx.request({
// 请求的地址如果一http开头直接用url不是http开头添加我们 baseUrL
url: url,
method:option.method||"GET",//请求的方法 默认get
data:option.data, //post出入的参数
header,
success(res){
// 请求成功
resolve(res.data);
},
fail(err){
// 04 对错误进行处理
wx.showToast({title:"加载失败",icon:"none"})
// 请求失败
reject(err);
},
complete(){
// 关闭加载提示
wx.hideToast();
}
})
})
}
// 定义get简易方法
request.get= (url,config)=>{
return request({url,method:"get",...config})
}
// 定义post简易方法
request.post= (url,data,config)=>{
return request({url,method:"post",data,...config})
}
// 导入request
module.exports={request}
tabBar
"tabBar": {
"list": [
{
"pagePath": "pages/yidian/yidian",//路径
"text": "一点",//命名
"iconPath": "/images/new.png",//默认图标
"selectedIconPath": "/images/new-h.png"//别选中图标
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "/images/home.png",
"selectedIconPath": "/images/home-h.png"
}
]
},
npm
1.初始化项目
2.安装插件
3.app.json删除v2
4.修改project.config.js
5.构建npm
6.导入组件
7.使用组件