定义
- 微信里面app
- 16年推出
- 竞品:支付宝小程序,钉钉,美团,头条,抖音qq小程序
优点
- 在微信自由分享
- 不用下载app
- 能快速开发,使用微信的api接口
开发者
- 内存,源码,图片,存储,接口与数据都有限制
模板语法
文本渲染
- {{msg}}
- 可以执行简单的js表达式 {{2+3}} {{msg.ength}}
条件渲染
- wx:if=“”
- wx:elif=“”
- wx:else=“”
列表渲染
- wx:for=“{{list}}” wx:key=“index”
- {{item}}
- {{index}}
自定义列表渲染
- 定义item与index的名称
- wx:for=“{{list}}” wx:for-item=“myitem” wx:for-index=“myidx”
- {{myitem}} {{myidx}}
导入
- import
- 只能导入template内容
- template/untils.wsml
< template name=“userCart”>用户名:{{name}}</ template> - home.wxml
< import src=“/template/untils.wxml”>
< template is=“userCart” data=“{{…u1}}”>
- include
- 只能导入非template内容
- template/foot.wxml
< view>{{内容}}</ view> - home.wxml
< include src=“/template/foot.wx.ml”>
事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如id, dataset, touches。
使用方式
- bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view bindtap="函数名"> Click me! </view>
- bindInput 表单输入时
- bindconfirm表单输入确认
内置API
- 显示提示showToast
- 本地存储
wx.setStorageSync(key,value)
本地取
wx.getStorageSync(key) - wx.request 网络请求
表单绑定
- < input value=“{{s1}}” bindinput=“inputHd”>
- inputHd(e){
this.setData({s1:e.detail.value})
} - 表单的值获取:e.detail.value
页面切换
组件跳转
- 使用navigator组件
<view>
<navigator open-type="navigate" url="/pages/event/event?name=mumu&age=18">普通跳转</navigator>
</view>
<view>
<navigator open-type="redirect" url="/pages/event/event?name=宋龚&age=22">跳转替换</navigator>
</view>
<view>
<navigator open-type="reLaunch">重启</navigator>
</view>
<view>
<navigator open-type="navigateBack">返回</navigator>
</view>
api跳转
- wx.navigateTo 跳转
wx.navigateTo({
url: '/pages/event/event',
})
- wx.switchTab 切换底部栏
- wx.redirect 重定向
- wx.reLaunch 重启
页面传参
- 小程序页面传参主要通过 查询传参
- 传:url=“xxxx/xxx?name=mumu&age=18”
- 接收:onLoad options参数接收
- options.name
- options.age
tabBar
配置信息
- 在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。底部导航最多5个最少2个
{
"tabBar": {
"list": [
{
"pagePath": "pages/yidian/yidian",//路径
"text": "一点",//名称
"iconPath": "/imgs/t4.png",//选中前图标
"selectedIconPath": "/imgs/t4-h.png"//选中后图标
}
]}
}
全局数据
- app.js的globalData
- 定义 app.js的globalData
- 页面使用
var app = getApp();
app.globalData.num
封装request
untils/request.js
// 基础的url
const URI = {
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:URI.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}
vant 组件
- 初始化项目 npm init -y
- 通过npm安装 npm i @vant/weapp -S --production
- 将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
- project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
- 注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为’./'即可
- 打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。