小程序开发总结

小程序封装request

let getAjaxTimes = 0
let postAjaxTimes = 0
const service = {
  requestGet(url, data) {
    return new Promise((resolve, reject) => {
      getAjaxTimes++;
      wx.showLoading({
        title: "加载中...",
        mask: true
      })
      wx.request({
        url: url,
        method: "GET",
        data: data,
        header: {
          "content-type": "application/json",
        },
        success: res => {
            //直接返回请求体
          resolve(res.data);
        },
        fail: err => {
          reject(err);
        },
        //接口调用结束的回调函数（调用成功、失败都会执行）
        complete: function () {
          getAjaxTimes--;
          if (getAjaxTimes === 0) {
            wx.hideLoading()
          }
        }
      })
    })
  },

    /* 
        定义env域名+环境+接口url
     */

    //获取小程序的环境
    const envVersion = __wxConfig.envVersion;
    // 配置域名
    var host = ""; 

    //根据环境设置不同的域名
    if (envVersion == "develop") { // 开发版
        //测试环境
        host = "https://sy.smartlink.com.cn:44300/test/faw/api" 
    } else if (envVersion == "trial") { // 体验版
        host = "https://uat-iov-ec.fawjiefang.com.cn/app/api/faw" // UAT环境
    } else if (envVersion == "release") { // 正式版
        host = "https://iov-ec.fawjiefang.com.cn/app/api/faw"
    }

    /* 
        接口url
     */
    const urls = {
        couponListUrl: host + '/vehiclewifi/wifi/couponList', // 解析电话号码
        }
    export default urls;



    //定义接口
  module.exports = {
    getCouponList: (data) => {
        return new Promise((resolve, reject) => {
            resolve(service.requestPost(urls.couponListUrl, data))
        })
    },
    }

    //使用
    const apiServer = require('../request');

    let result = await apiServer.getCouponList(param);

小程序的背景图处理

1. 使用网络图片
2. 把图片转为base64格式的图片, 图片转base64格式工具 tool.chinaz.com/tools/imgto…

3. <view class="page" >
   <image src="../assets/bg.png"></image>
   </view>
   
   image {
   position: absolute; //使用绝对定位
   left: 0;
   bottom: 0;
   display: block;
   width: 100%;
   height: 100%;
   z-index: -999; //降低等级
   }
   
   

开发小坑

1. 对子组件使用v-if，那么子组件就不会进行渲染,子组件生命周期也不会执行，那么就获取不到子组件ref
2. Pubsub-js 使用方法

//发布者
PubSub.publish('handlerState', '2');
//订阅者
created() {  //生命周期函数中订阅
    PubSub.subscribe('handlerState', (msg, data) => {
        //data接受的数据
        this.maskState = data;
    });
},