小程序简介
小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
配置
全局配置:
pages
存放页面的路径
首页就是第一个路径
window窗口信息
"backgroundTextStyle": "light",
背景颜色
"navigationBarBackgroundColor": "#f30",
导航栏背景颜色
"navigationBarTitleText": "亮亮玩小程序",
导航栏标题
"navigationBarTextStyle": "white"
导航栏文本颜色 white | black
页面配置:
同 app.json window
配置只对当前页面启用
会覆盖全局配置
"enablePullDownRefresh": true,
允许下拉刷新
"backgroundTextStyle": "dark",
背景文字颜色(下拉才能看见)
"backgroundColor": "#f30",
背景颜色(下拉才能看)
页面结构
xxx.js 业务逻辑
xxx.json 页面的配置
xxx.wxml 页面的模板
xxx.wxss 页面样式
WXSS的单位
小程序单位 rpx
750rpx 就是一个屏幕的宽
条件编译
帮助切换小程序的默认启动页面(首页)
基础组件
- view 容器
- text 文本
- image 图片
- input 表单
- template 模板
- navigator跳转
- url跳转的页面
- /pages/todo/todo
- ../todo/todo
- open-type打开类型
- navigate默认跳转
- redirect
重定向(原页面的历史记录被跳转页面替换)- switchTab
跳转到底部栏对应页面- navigateBack
返回- relaunch
重置- navigateBack 回退上一级
不校验合法域名
方便个人编写
渲染指令
{{}}
文本渲染指令
- 条件
- wx:if="{{}}"
- wx:elif="{{}}"
- wx:else
其他
- 遍历
- wx:for="{{list}}"
需要指定wx:key="index"
index遍历元素的下标
item 代表变量的元素- 对象,数组,数字,字符串都可以被遍历
- 自定义item与index(多重遍历)
wx:for="list" wx:for-item=="myitem" wx:for-index="ind" wx:key="ind"
- include
- 把文件单纯拷贝过来
<include src="url">
- import+template
- 定义template
<template name="user">
用户名:{{name}}
</template>- 使用
<import src="url">
<template name="user" data={{...list[0]}}>
事件
- 事件响应
- bindtap=“函数名”
被点击- bindinput=“”
表单发生变化- bindconfirm=""
确认键- bindlongPress=“”
长按
- 实现传参
- <view data-msg="参数" bindtap=“tapHd”>
- e.target.dataset.msg
- e.detail.value
表单的值
- 表单的双向绑定
- <input value="{{msg}}" bindinput="inputHd">
- inputHd(e){
this.setData({msg:e.detail.value})
}
小案例todolist
.WXML 页面
.WXSS页面
api
1,网络请求
wx.request({
url,method,header,success,fail,complete
})2,界面类
- wx.showToast({title,icon})
提示- wx.showModal({title,content,success,fail}))
确认框- wx.showLoading()
显示加载提示- wx.pageScrollTo({duration,scrollTop})
滚动页面3,数据缓存
- wx.getStorageSync(key)
取- wx.seetStoreageSync(key,value)
存4,路由
- wx.navigateTo({url})
普通跳转- wx.redirectTo({url})
重定向- wx.switchTab({})
底部栏跳转- wx.navigateBack()
返回- wx.reLaunch({url})
重启
生命周期
1,小程序的生命周期
- onLaunch
启动- onShow
前台显示- onHide
后台运行- onError
错误- onPageNotFound
页面找不到2,页面的生命周期
- onLoad(option)
加载- onShow
显示- onHide
隐藏- onReady
准备完毕(操作节点)- onUnload卸载
页面传参
url=“xxxx?num=15”
onLoad(options){
options.num 获取参数
}
全局数据
全局数据
app.js 页面定义
globalData:{outflow:100}
页面进行使用
var app = getApp();
app.globalData.outflow-=1;
常用全局方法
onReachBottom
触底onPullDownRefresh
下拉onShareAppMessage(){return {url,title,imageUrl}}
分享onShareTimelime()
分享朋友圈onAddToFavorites()
收藏onPageScroll({scrollTop:xxx}){}
页面滚动
页面栈
卸载与隐藏
- 正常的从A->B A会隐藏
- 正常的从 A->B redirect A会卸载
- 正常A->返回到首页 A页面会卸载
总结: redirect会卸载,navigateBack会卸载
navigate(缓存页面)
小程序默认可以缓存5级页面
- A->B->C->D->E
五个页面都存起来- A->B->C->A->E
- redirect 当前页面会销毁
- A->B-redirect->C->D-<E
- wx.navigateBack({delta: 2})
使用npm
npm init -y
初始化项目
安装
npm i @vant/weapp -S --production
工具->构建npm
app.json,导入组件
"usingComponents": {
"van-button": "@vant/weapp/button/index"
},
页面中使用
<van-button type="primary">按钮</van-button>
创建组件Component
组件的传参
父传子
property父:
<step value="10">子 properties:{
value:{type:Number,value:1}
}
使用-只读:
this.data.value
1.子组件wxml中绑定addInfo函数,
<button type="primary" bindtap="addInfo">确定</button>
2.子组件js中定义函数addInfoaddInfo(){
let item = {
title:'测试',
money:8,
category:'吃饭'
} //要传给父组件的参数
this.triggerEvent('addInfo',item) //通过triggerEvent将参数传给父组件
}
3.父组件wxml中绑定(接收)自定义点击函数<add-item bind:addInfo="getAddInfo"></add-item>
4.父组件js中接收子组件传过来的参数getAddInfo(e){
console.log(e.detail) //{title:'测试',money:8,category:'吃饭'}