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);

或者同步获取