微信小程序&mpvue F&Q

 

目录结构

 

3用于设置页面配置https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#页面配置

5用于全局配置https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配置

4状态管理vuex

vuex的使用

store.js，在vue中没什么区别

// https://vuex.vuejs.org/zh-cn/intro.html
// make sure to call Vue.use(Vuex) if using a module system
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: (state) => {
      const obj = state
      obj.count += 1
    },
    decrement: (state) => {
      const obj = state
      obj.count -= 1
    }
  }
})

export default store

index.vue需要自己导入store.js

。。。
<script>
// Use Vuex
import store from './store'//--------------->导入store

export default {
  computed: {
    count () {
      return store.state.count
    }
  },
  methods: {
    increment () {
      store.commit('increment')//--------------->使用更新状态store
    },
    decrement () {
      store.commit('decrement')//--------------->使用更新状态store
    }
  }
}
</script>
。。。

底栏的tabitems切换按钮

在app.json中设置

页面跳转

a标签完成跳转

申请权限

auth(){
      wx.getSetting({//------->获取权限集合
        success(res) {
          if (!res.authSetting['scope.camera']) {//------->没有照相权限
            wx.authorize({//------->申请照相权限
              scope: 'scope.camera',
              success() {
                // 成功申请到摄像头功能。。。
              }
            })
          }
        }
      })
    },

摄像头、获取一张图片

1.takePhoto

<camera device-position="front" flash="on" style="width: 100%; height: 150px;"></camera>
<button @click="camera">camera</button>
<img :src="takePhoto" alt="">


camera() {
      let _this = this;
        let ctx = wx.createCameraContext()
          ctx.takePhoto({
              quality: 'normal',
              success(res){
                _this.takePhoto = res.tempImagePath;
              }
          })    
},

2.wx.chooseImage

 let _this = this;
    wx.chooseImage({
      success(res){
       console.log(res,'33333333')
       _this.takePhoto = res.tempFilePaths
   }
})

在mpvue使用第三方iview

1.到 GitHub (https://github.com/TalkingData/iview-weapp)下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中改名为      'iview'

2.引入iview在某一page中，修改xxx.json文件

3.在代码中使用iview，<i-button>引用iview中的button

mpvue中A的子组件B引用iview的问题

有效的：父组件A.vue的main.json中添加iview，子组件B的对iview的引用才生效

1)子组件player.vue引用了iview中的组件<i-button>

2)父组件index.vue引用了player

3.父组件index.vue对应的main.json

无效：在子组件player中添加iview，如下操作无效

v-if不能用使用v-show代替

小程序中不能删除添加dom

小程序原始组件监听问题

无效：在mpvue中 bindchanging='handleXXx()'，这样写无效，报错

Component "pages/music/main" does not have a method "sliderchange" to handle event "change".

有效：进入如下操作

报错中蓝色字体提示了事件名'change'，直接对change事件监听

注意：事件$event调用有区别，小程序事件数据，需要 e.mp.xxx 获取

官网案例如下

需加上红框‘mp’

img图片问题

图片直接放入static目录，引用的路径'/static/***'

微信小程序授权问题

//获取权限列表，1.判断是否有xx权限，3.没有则申请权限
getSetting(){
        let _this = this;
        wx.getSetting({
          success(res) {//获取权限列表
            console.log(res.authSetting)
            console.log(res.authSetting["scope.userLocation"])
            if(res.authSetting["scope.userLocation"]){//1.判断是否有xx权限
                //判断有xxx权限,执行后面的逻辑
              console.log("res.authSetting.userLocation")
            }else{
              _this.getLocation();//------------->3.判断没有xxx权限，则申请权限
            }
            
          }
        })
}

//第一次授权显示对话框，如果成功，则调用，失败则：每次调用默认回调fail接口
getLocation(){
        let _this = this;
        wx.getLocation({
          type: 'wgs84',
          success(res) {
            const latitude = res.latitude
            const longitude = res.longitude
            const speed = res.speed
            const accuracy = res.accuracy
            console.log('getLocation',res)
          },
          fail(){
            console.log("打开提示框，提示需要手动设置权限")
            wx.showModal({
              title: '提示',
              content: '授权失败，请手动打开 用户位置 权限',
              success(res) {
                if (res.confirm) {
                  console.log('用户点击确定')
                  _this.getSetting();----------->打开手动权限设置列表
                } else if (res.cancel) {
                  console.log('用户点击取消')
                }
              }
            })
            
          }
        })
      },

//打开权限列表，手动开启权限
getOpenSetting(){
        wx.openSetting({
          success(res) {
            console.log("成功打开手动授权列表")
            // res.authSetting = {
            //   "scope.userInfo": true,
            //   "scope.userLocation": true
            // }
          }
        })
      },