微信小程序-总结开发
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 跳转后保留跳转记录
<buttonbindtap="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 属性
<templatename="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>
hover-class = "none"
hover-stop-propagation = "false"
hover-start-time = "50"
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-textnodes="
hello
"></rich-text>nodes
space = "nbsp"
5. image 图片
<image></image>
src
mode = "scaleToFill"
lazy-load = "false"
13. 数据双向绑定
使用 model 双向绑定数据
<inputmodel:value="{{msg}}"></input>
表单数据：在 form 中绑定函数，获取表单数据。获取表单数据时必须使用 name 属性
<formbindsubmit="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: {
user:{
name:"",
pass:""
}
},
sub(ev){
console.log(ev.detail.value);
}
})
14. 音频播放
使用 wx.createInnerAudioCOntext() api接口实现音频播放
<buttonbindtap="player">music</button>
player(){
var music = wx.createInnerAudioCOntext();
music.src = "/1.mp3";
music.play();
}
15. 模块化
定义模块：common.js
两种打包方式
function sayHello(val){
console.log(`hello ${val}`);
}
module.exports.sayHello = sayHello
exports.sayHello = sayHello
require ：引入包才能使用
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) {
}
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 中的函数
不支持在组件上使用class style
列表渲染 需要索引 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);
或者同步获取
