微信小程序开发——踩坑笔记

       最近从寒假开始，一直断断续续的整着小程序，开发没弄多少，但坑却踩了不少，总有一些看上去很简单的东西但就是弄不出自己想要的样子，这里就把我踩的坑整理一下，其中也借鉴了不少大佬们的博客~

       由于本人小程序开发主要使用的mpvue框架，所以有不少的坑会是mpvue开发过程中的，当然也会有原生小程序的，下面我会标注出来~

       另：此处只列举出了一些细节上的小坑，有关微信小程序登陆授权，组件的使用之类的，我会另外再写一篇~

一、页面跳转

       微信小程序原生方式：

//方法一
wx.navigateTo({
    url: 'pages/index/main'
})

//方法二

    由于在mpvue里是完全兼容小程序原生写法的，所以一般页面跳转我们还是使用原生的方法，在vue里使用的vue-router是不能用在小程序的。这里有几点问题说一下：

   1. 这里的url对应的是你将要跳转的页面对应的.js文件

   2.对于在tabBar里已经写过的页面，就是已经存在在底部导航栏的页面，是不能使用这种方式跳转的，只能通过tabBar来跳转

   3.如果还是无法跳转，好好检查一下路径，80%的可能是路径写错了

二、图片加载

    有两种我们常使用的加载图片的方式：src与url。

    在微信小程序中，我们使用src引用静态文件，即可以引用存放在image文件夹下的图片。但url在微信小程序中只能引用网络图片，无法引用静态的图片文件。

    网上有很多解决网络图片的方案，我这里推荐最简单有效的方案：申请一个阿里云对象存储OSS的账号，直接把图片传到OSS上，然后在url里引用图片的网络地址就可以了。

三、网络请求

    关于网络请求，博客上的方式五花八门。本人当初试过很多种方式，但不知道为什么，很多都没有效果。这里我就只介绍一种本人亲测可行的方案，具体问题的还是要看自己的具体环境。

   这里使用的是网上也比较推荐的一个插件：flyio

   具体的使用大家可以看看官方文档，这里就说一下我的使用：

   首先安装：npm install flyio --save

   然后，在utils文件夹下，创建一个request.js文件，写上如下代码：

//引入你下载的插件
import Fly from 'flyio/dist/npm/wx'

//创建fly实例
const fly = new Fly()

//这里写你要访问的域名
const host = '' 

fly.config.baseURL = host

//这里抛出一个fly模块
export default fly

   其实这里不单独创建一个js文件也OK，但这里实现的只是最简单的引用，后续可能还有添加拦截器等功能，单独抽出来可能更好，这里我们就先简单的把插件用起来。

  然后，在你的main.js文件里，加上如下代码：

import fly from './utils/request'

Vue.prototype.$fly = fly

    配置就基本完成了，下面我们在页面上使用一下：

this.$fly.request({
        method: 'get',    //请求方式
        url: '',    //访问的后台接口
        body: {}    //传回后台的参数
      }).then(res => {
        console.log(res.data)
      }).catch(error => {
        console.log(error)
      })

以上就是使用flyio的基本方式，小程序的网络请求当然也可以使用原生的方法，mpvue同时兼容原生方式：

wx.request({
  url: '',       //自己的服务接口地址
  method: 'post',    //请求方式
  header: {
       'content-type': 'application/x-www-form-urlencoded'    //请求头
  },
  data: {},    //请求参数
  //请求成功的回调函数
  success: function (data) {
       console.log("后台返回：",data);
  }, 
  //请求失败的回调函数
  fail: function () {
       console.log('系统错误');
  }
})

四、v-for的使用

     我们在vue里使用v-for，对于key虽然加上更好但不加上也不会报错，但在mpvue里，只要使用v-for必须要加上key值，而且注意如果父元素和子元素都使用了v-for，那么key值的变量名是不可以相同的。