阅读 263
微信小程序开发后整理

微信小程序开发后整理

图片上传可一次选择多张

van-uploader 通过multiple设置多张选择

<van-uploader
	file-list="{{ photoUrlList }}"
	bind:after-read="afterPhotoRead"
	deletable="{{ true }}"
	bind:delete="handleDeleteFiles"
	data-type="photo"
	multiple
/>

<van-button
	round
	color="#5F56FF"
	block
	bindtap="toSubmit"
>提交
</van-button>
复制代码
Page({
	data: {
  	photoUrlList: []
  },
  
   //图片上传 - 店内招牌
  afterPhotoRead(event) {
    const { file } = event.detail;
    let list = this.data.photoUrlList;
    this.setData({
      photoUrlList: [...list, ...file],
    });
  },
  
    // 图片删除
  handleDeleteFiles(e) {
    const { index } = e.detail;
    const { type } = e.currentTarget.dataset;
    if (type === "photo") {
      const { photoUrlList } = this.data;
      photoUrlList.splice(index, 1);
      this.setData({
        photoUrlList,
      });
    } 
  },
  
  // 图片上传
  beforeSubmit() {
    wx.showLoading({
      title: "上传中...",
      icon: "loading",
      mask: true,
    });

    const { photoUrlList, avatarUrlList } = this.data;
    return Promise.all([
      uploadMultipleFile(photoUrlList).then((res) => {
        this.setData({
          photoUrl: res.join(","),
        });
      }),
      uploadMultipleFile(avatarUrlList).then((res) => {
        this.setData({
          avatarUrl: res.join(","),
        });
      }),
    ]);
  },
  
   // 提交
  toSubmit(e) {
    // 提交前需要进行图片上传
    this.beforeSubmit().then((res) => {
      wx.hideLoading();
     	// 文件上传成功后调用
    });
  },
  

})
复制代码

封装好后的图片上传方法

/**
 * 单张图片上传
 * @param {*文件路径} path
 * @returns
 */
const uploadFile = (path) => {
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      url: BASE_URL + '/uploadFile',
      filePath: path,
      name: 'file',
      formData: { user: 'test' },
      success: (res) => {
        const { code, data } = JSON.parse(res.data);

        if (code === 200) {
          resolve(data);
        } else {
          wx.showToast({
            title: '系统错误,请联系管理员',
            icon: 'none',
          });
          reject(data);
        }
      },
      fail: (err) => {
        reject(err);
      },
      complete: (info) => {
      },
    });
  });
};

/**
 * 多张图片上传
 * @param {*文件数组} list
 * @returns
 */
const uploadMultipleFile = (list = []) => {
  return Promise.all(
    list.map(async (d) => {
      if (d.size && d.type) {
        let data = await uploadFile(d.url);
        return data.filePath;
      } else {
        return d.url;
      }
    })
  );
};
复制代码

验证表单提交

const validRules = {
  name: {
    msg: "请填写商家名称",
  },
  introduction: {
    msg: "请填写简介",
  },
};

for (let item in validRules) {
  if (!this.data[item] || this.data[item].length === 0) {
    validRules[item].msg &&
      wx.showToast({
      title: validRules[item].msg,
      icon: "none",
    });
    return;
  }
}
复制代码

下拉加载

scroll-view 搭配 ang-loading

<scroll-view class="pad-lr-24 pad-b-24 scroll-height border-box" scroll-y bindscrolltolower="handleToLower">
	<view class="flex-cc border-box">
    <view
     	class="card flex-rb store-item"
      wx:for="{{pageList}}"
 	    wx:key="*this"
      data-id="{{item.id}}"
      bindtap="goBusinessDetail"
     >
        <image src="{{item.avatarUrl}}" class="middle-image-208" />
    </view>
  </view>
  <ang-loading noData='{{ noData }}' noMore='{{ noMore }}' />
</scroll-view>
复制代码
 // 下拉加载
handleToLower() {
  let { isLoading, page, noMore, noData } = this.data;
  if (isLoading || noMore || noData) return;
  this.setData({
    page: page + 1,
  });
  this.fetchList();
},

  // 获取数据
fetchList() {
  this.setData({
    isLoading: true,
  });
  const {
    page,
    limit,
    pageList,
    businessType,
  } = this.data;

  const params = {
    businessType,
    page,
    limit,
  };

  API.PAGE_BUSINESS_4_USER(params).then((data) => {
    if (data) {
      const { totalCount, list } = data;

      let currentList = page === 1 ? list : [...pageList, ...list];
      let noData = totalCount == 0;
      let noMore = currentList.length === totalCount;

      this.setData({
        pageList: currentList,
        isLoading: false,
        noMore,
        noData,
        ready: true,
      });
    }
   });
  },
复制代码

从底部弹起的询问窗口,显示操作菜单

wx.showActionSheet

wx.showActionSheet({
  itemList: ['删除'],
  success(res) {
    if (res.tapIndex === 0) {
      const params = { id };
      API.DELETE_DYNAMIC(params).then((data) => {
        if (data) {
          _this.getList();
        }
      });
    }
  },
  fail(res) {
    console.log(res.errMsg);
  },
});
复制代码

是否开启定位

先通过 isLocation 方法判断当前用户的定位权限状态

  1. 从未申请定位权限,跳转询问 => askForLocation
  2. 已经授权定位权限,直接查询 => wxGetLocation
  1. 询问过,但拒绝了,跳转询问 => askForLocation
isLocation() {
  let _this = this;
  wx.getSetting({
    success(res) {
      // 如果从未申请定位权限,则申请定位权限
      if (res.authSetting['scope.userLocation'] == null) {
        wx.authorize({
          scope: 'scope.userLocation',
          success() {
            _this.askForLocation();
          },
          fail() {},
        });
      } else if (res.authSetting['scope.userLocation'] == true) {
        //如果已经有权限,就查询
        _this.wxGetLocation();
      } else {
        //询问过,但是拒绝了,需要再次询问,并引导到授权页面
        _this.askForLocation();
      }
    },
  });
},

 //弹窗询问是否开启定位,并引导到开启定位授权页面
 askForLocation() {
   let that = this;
   wx.showModal({
     title: '位置信息授权',
     content: '位置授权暂未开启',
     cancelText: '拒绝',
     confirmText: '开启授权',
     success: function (res) {
       if (res.confirm) {
         // 跳转授权页
         wx.openSetting({
           withSubscriptions: true,
           fail: function () {},
           success: function () {
             that.wxGetLocation();
           },
         });
       }
     },
    });
  },

 // 获取定位信息
 wxGetLocation() {
   const _this = this;
   wx.getLocation({
     type: 'wgs84',
     success: function (res) {
       //将位置信息存放到全局
       app.globalData.latitude = res.latitude;
       app.globalData.longitude = res.longitude;
       //将位置信息存放到本页面
       _this.setData({
         latitude: res.latitude,
         longitude: res.longitude,
       });
       _this.getList();
      },
    });
  },
复制代码

微信支付

通过调用后端接口发起支付,接口返回参数 timeStamp、nonceStr、package、signType、paySign等参数,用于调用小程序提供的支付接口 wx.requestPayment ,具体传参如下

//下单支付
toPay(orderId) {
  API.PAY_ORDER({ orderId }).then((data) => {
    if (data) {
      let result = JSON.parse(data.result);
      if (result.timeStamp) {
        this.toWxPay(result);
      }
    }
  });
},

 // 微信支付
 toWxPay(d) {
    wx.requestPayment({
      timeStamp: d.timeStamp,
      nonceStr: d.nonceStr,
      package: d.package,
      signType: d.signType,
      paySign: d.paySign,
      success: function (res) {
        wx.showToast({
          title: "购买成功",
          icon: "none",
        });
        setTimeout(() => {
          GoPage("商家_我的");
        }, 2 * 1000);
      },
      fail: function (res) {},
      complete: function (res) {},
    });
  },
复制代码

腾讯位置服务-地图打开后可通过本地app打开具体的路线

const QQMapWx = require("../../../utils/qqmap-wx-jssdk.min.js");
let qqmapsdk;

 // 需要地图定位当前坐标,并能打开本地地图app
chooseThis() {
  const { longitude, latitude, address } = this.data.info;
  const that = this;

  // 使用 JavaScript SDK 获取目的地经纬度
  // 实例化API核心类
  qqmapsdk = new QQMapWX({
    key: TX_KEY, // 腾讯地图申请的key值
  });
  qqmapsdk.geocoder({
    address,
    success: function (res) {
      that.setData({
        latitude,
        longitude,
      });
    },
  });
  // 使用微信内置地图查看位置
  wx.getLocation({
    type: "gcj02", //返回可以用于wx.openLocation的经纬度
    success: function (res) {
      wx.openLocation({
        latitude: Number(latitude),
        longitude: Number(longitude),
        scale: 28,
        name: address, //打开后显示的地址名称
      });
    },
  });
}
复制代码

腾讯位置服务-位置选择

腾讯位置服务-小程序插件

  1. 按照上方链接注册KEY值;
  2. 拼接出需要套跳转的url :
// 腾讯位置服务
export const TX_KEY = 'PO4BZ-XTM6J-WKPFG-K6DD3-LTYBQ-HSFSB'; //使用在腾讯位置服务申请的key
export const TX_REFERER = 'fineFood-weChat'; //调用插件的app的名称
const TX_CATEGORY = '美食'; // 非必传
// 非必传
const TX_LOCATION = JSON.stringify({
  latitude: 39.89631551,
  longitude: 116.323459711,
});
'plugin://chooseLocation/index?key=' + TX_KEY + '&referer=' + TX_REFERER + '&location=' + TX_LOCATION + '&category=' + TX_CATEGORY;
复制代码
  1. 从地图插件返回后
  // 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象
  onShow() {
    const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null
    if (location) {
      this.setData({
        address: location.address,
        longitude: location.longitude,
        latitude: location.latitude,
      });
    }
  },
复制代码

vant 组件库引入

方法一:

npm包构建,举例 vant 引入

  1. npm init 创建 package.json 文件夹
  2. npm i @vant/weapp -S --production 安装
  1. 微信开发者工具 > 工具 > 构建 npm,构建生成 miniprogram_npm 文件夹
  2. 详情 > 使用 npm 模块
  1. 在需要的页面(例如 index.json)引用组件,然后 index.wxml 页面使用组件

\

{
  "usingComponents": {
    "van-button": "/miniprogram_npm/@vant/weapp/button/index"
  }
}
复制代码
<van-button type="primary">按钮</van-button>
复制代码

方法二:

可直接去vant github库,将组件库直接下载到本地,直接使用。

页面跳转

方法一:使用switchTab,switchTab用于跳转tarbar内的页面:

wx.switchTab({
  url: '../job/job',
})
复制代码

\

方法二:使用redirectTo,navigateTo的跳转不是tarBar内的页面:

wx.redirectTo({
  url: '../logs/logs',
})

wx.navigateTo({
  url: '../logs/logs',
})
复制代码

onShow 与 onLoad

onshow

  • 每次打开页面都会调用一次。(页面加载好之后 你切到其他页面 再回来 显示这个页面 之前加载过的话 onLoad就不跑了 这是 页面信息呈现在你面前的这个过程 会跑onShow )

onLoad

  • 打开小程序进入该页面时候 (此时点击tabbar中的每一项都会执行onload, 从点击过了的tab项再进入其它点击过的tab项,不会执行 onload)
  • 修改代码点击保存的时候会 onload
  • 页面跳转(带参数,因为页面只能通过onload(option)方法中options 获取参数)
  • wx.navigateTo和wx.redirectTo及中带有 query参数,注意wx.switchTab要跳转到的页面已经被打开过,不会触发onload
文章分类
前端