1. 配置文件：路由
"pages":[
"pages/index/index",
"pages/class/class",
"pages/show/show",
"pages/message/message",
"pages/home/home"
]
路由跳转：
wx:navigateTo({
url:"pages/index/index"
})
2. 配置文件：window
"window":{
"navigationBarBackgroundColor":"#ff0",
"navigationBarTitleText":"我的小程序",
"navigationBarTextStyle":"black"
},
3. 路由跳转
wx.navigateTo 跳转后保留跳转记录
<button bindtap="jump">button</button>
// 按钮跳转事件
jump(){
wx:wx.navigateTo({
url: '/pages/home/home'
})
}
url 不能优后缀，self 是在当前小程序内打开
<navigator
target="self"
url="/pages/home/home"
open-type="navigate"
>
<button>跳转</button>
</navigator>
路由返回：使用open-type="navigateBack"路由返回，使用delta="1"规定返回几层
<navigator
target="self"
open-type="navigateBack"
delta="1"
>
<button>返回</button>
</navigator>
3.1 路由传参
使用 ？传参
<navigator
target="self"
url="/pages/home/home?id=001"
>
<button>跳转</button>
</navigator>
跳转后的页面，接参时直接接收到传的 json 参数
onLoad: function (options) {
console.log(options);
},
获取 app中数据
var app = getApp()
4. 配置文件：导航栏
"tabBar":{
"color": "#333333", //未选中文本颜色
"selectedColor": "#00ff00", //选中文本颜色
"backgroundColor": "#eeeeee", //背景颜色
"list":[ //导航列表
{
"pagePath":"pages/index/index", //路由
"text":"首页", //导航文本
"iconPath":"logo/shouye.png", //未选中图标
"selectedIconPath": "logo/shouye-ch.png" //选中图标
},
{
"pagePath":"pages/class/class",
"text":"分类",
"iconPath":"logo/fenlei.png",
"selectedIconPath": "logo/fenlei-ch.png"
},
{
"pagePath":"pages/show/show",
"text":"展示",
"iconPath":"logo/zhanshi.png",
"selectedIconPath": "logo/zhanshi-ch.png"
},
{
"pagePath":"pages/message/message",
"text":"消息",
"iconPath":"logo/xiaoxi.png",
"selectedIconPath": "logo/xiaoxi-ch.png"
},
{
"pagePath":"pages/home/home",
"text":"我的",
"iconPath":"logo/home.png",
"selectedIconPath": "logo/home-ch.png"
}
]
}
5. 数据绑定
<view> {{ message }} </view>
Page({
data: {
message: 'Hello world!'
}
})
6. 条件渲染
wx:if 和 hidden
<view wx:if="{{index==n}}" >
<text>{{item.msg}}</text>
</view>
<!-- 不会生成标签，在条件渲染时使用 -->
<block></block>
7. 列表渲染
key 属性直接写，不用加 {{ }}
<view wx:for="{{list}}" wx:for-index="key" wx:for-item="val" wx:key="id" >
<text>{{key}} - {{val.msg}}</text>
</view>
8. 绑定事件
- 一般点击事件用 bindtap
- 事件传参时不是直接传，需要用一个自定义属性
- 如
data-index="{{index}}" - 事件函数中用
event.currentTarget.dataset.index接收 - 需要
this.setData({ })引起页面自动渲染
<button bindtap="func" data-index="{{index}}">{{item.title}}</button>
func: function(ev){
this.setData({
n: ev.currentTarget.dataset.index
})
}
- bind：绑定事件，事件可以冒泡
- catch：绑定事件，事件不能冒泡（阻止事件冒泡）
9. 场景值
**场景值：**就是用户通过什么方式进入的小程序
// 获取场景值一
var scene = wx.getLaunchOptionsSync().scene;
console.log(scene);
// 获取场景值二
onLaunch(options){
var scene = options.scene;
console.log(scene);
}
10. 生命周期函数
Page({
// 页面加载完成
onload(){
console.log("load");
},
// 页面展示
onShow(){
console.log("show");
},
// 小程序切换后台时
onHide(){
console.log("hide");
},
// 页面不存在时
onPageNotFound(){
console.log("404");
},
// 页面下拉刷新
onPullDownRefresh(){
console.log("下拉");
},
// 页面到底上拉
onReachBottom(){
console.log("触底上拉");
}
})
11. 模板
定义模板时需要写一个 name 属性
<!-- 定义模板 -->
<template name="nav">
<view class="nav_box" wx:for="{{arr}}" wx:key="*this">
<text>{{item}}</text>
</view>
</template>
**data：**data里是传给模板的值
<!-- 使用模板-->
<import src="/template/nav.wxml" />
<template is="nav" data="{{arr}}"></template>
使用 @import 引入其他样式表
@import '/assets/nav.wxss'
12. 组件
1. view 视图容器
<view></view> <!-- 视图容器：<div> -->
hover-class = "none" <!-- 按下去的样式 -->
hover-stop-propagation = "false" <!-- 阻止事件冒泡 -->
hover-start-time = "50" <!-- 按下一段时间 (ms) -->
hover-stay-time = "600" <!-- 弹起后点击状态延迟消失 -->
2. icon 图标
<icon></icon> <!-- 默认图标 -->
type = "success" <!-- 图标类型 -->
"success_no_circle"
"info"
"warn"
"waiting"
"cancel"
"download"
"search"
"clear"
size = "23" <!-- 图标大小 -->
color <!-- 图标颜色 -->
3. text 文本
<text></text> <!-- 文本 -->
selectable = "false" <!-- 文本是否可选 -->
space <!-- 显示连续空格 -->
decode <!-- 是否解码 -->
4. rich-text 富文本
使用特殊文本标签：如h1~h6
<rich-text nodes="<h1>hello</h1>"></rich-text>
nodes <!-- array/string 节点列表/HTML String -->
space = "nbsp" <!-- 显示多个空格 ( ) -->
5. image 图片
<image></image> <!-- 图片 -->
src <!-- 图片资源地址 -->
mode = "scaleToFill" <!-- 图片裁剪、缩放的模式 -->
lazy-load = "false" <!-- 图片懒加载 -->
13. 数据双向绑定
使用 model 双向绑定数据
<input model:value="{{msg}}"></input>
表单数据：在 form 中绑定函数，获取表单数据。获取表单数据时必须使用 name 属性
<form bindsubmit="sub">
账号：<input name="name" value="{{user.name}}"></input>
密码：<input name="pass" value="{{user.pass}}"></input>
<button
form-type="submit"
>提交</button>
</form>
使用 ev.detail.value 获取表单数据
Page({
// data
data: {
user:{
name:"",
pass:""
}
},
//事件处理函数
sub(ev){
console.log(ev.detail.value);
}
})
14. 音频播放
使用 wx.createInnerAudioCOntext() api接口实现音频播放
<button bindtap="player">music</button>
player(){
var music = wx.createInnerAudioCOntext();
music.src = "/1.mp3";
music.play();
}
15. 模块化
定义模块：common.js
两种打包方式
// common.js
function sayHello(val){
console.log(`hello ${val}`);
}
// 方式一：打包
module.exports.sayHello = sayHello
// 方式二：引用包
exports.sayHello = sayHello
require ：引入包才能使用
// index.js
// 引入包
var comm = require('common.js')
Page({
//事件处理函数
btnClick(){
comm.sayHello("123")
}
})
16. 数据请求
wx.request({
url: 'url',
method: 'get',
data:{},
header:{
"content-type": "application/json"
},
success:(res)=>{
console.log(res);
},
fail:(err)=>{
console.log(err);
}
})
封装
const ajax = (url,method,data)=>{
return new Promise((res,rej)=>{
wx.request({
url,
method,
data,
header:{
"content-type": "application/json"
},
success:(data)=>{
res(data)
},
fail:(err)=>{
rej(err)
}
})
})
}
export default ajax;
17. 本地存储
1. 存储
// 异步存储
wx.setStorage({
data: "hello world",
key: 'title',
success:(res)=>{
console.log(res);
},
fail: (err)=>{
console.log(err);
}
})
// 同步存储
wx.setStorageSync('name', "微信小程序")
2. 查询
// 异步查询
wx.getStorage({
key: 'title',
success: (res)=>{
console.log(res);
},
fail: (err)=>{
console.log(err);
}
})
// 获取本地存储的所有信息
wx.getStorageInfo({
success (res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
})
// 同步查询
var res = wx.getStorageSync('name')
console.log(res);
// 获取本地存储的所有信息
try {
const res = wx.getStorageInfoSync()
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
} catch (e) {
// error
}
3. 删除
// 异步删除
wx.removeStorage({
key: 'title',
success: res=>{
console.log(res);
},
fail: err=>{
console.log(err);
}
})
// 同步删除
wx.removeStorageSync('name')
18. WEUI
-
安装
npm install weui-miniprogram -
配置
工具 --> 构建npm
详情 --> 本地配置 --> 使用 npm 模块
-
引入 app.wxss
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
19. mpvue 框架
-
安装vue脚手架
-
创建项目
vue init mpvue/mpvue-quickstart my-project -
安装包
npm install -
启动
npm run dev -
项目目录
index index.vue //页面,组件 main.js //导出组件 (文件名固定) main.json //配置文件 (文件名固定) -
不支持的语法
v-html不支持- 不支持过滤器
- 不支持在 template 内使用 methods 中的函数
- 不支持在组件上使用
classstyle - 列表渲染 需要索引
index - 事件修饰符
.stop，其他的都不支持
20. API
1. 动态设置当前页面标题
wx.setNavigationBarTitle({
title: "title"
})
2. 跳转页面 (带参)
wx.navigateTo({
url: "/pages/list/main?type="+data
});
21. Vue 小程序
// 设置标题
document.title = "页面标题";
// 事件监听
window.addEventListener([事件类型(click)], [调用的函数(函数名)], [冒泡还是捕获]);
// 删除事件
window.removeEventListener();
* 问题
1. wx:key 报错：does not look like a valid key name
看起来不像一个有效的键名
直接写 wx:key=id，不用加 {{}}
2. does not have a method to handle event "tap"
没有方法来处理事件“tap”。
1.事件传参时不能直接传参
2.用自定义属性传参
3.事件函数中用event接收
如：
<button bindtap="func" data-index="{{index}}">{{item.title}}</button>
<script>
func: function(ev){
this.setData({
n: ev.currentTarget.dataset.index
})
}
</script>
3. 根据 sitemap 的规则[0]，当前页面 [pages/class/class] 将被索引
在小程序项目配置文件 project.config.json 的 setting 中加入
"checkSiteMap": false,
4. the server responded with a status of 500
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mM1nVl0p-1661839632797)(F:\Markdown\upload\20190820235806120.PNG)]
1.渲染层网络层错误
2.检查图片路径
5. Cannot set property 'data' of undefined
有时候使用 this 时会出现 undefined 的情况
data () {
return {
data:[]
}
},
// 全部对象
var app = getApp();
app.globalData.data=[1,2];
console.log(app.globalData.data);
或者同步获取
