Micro channel small program development after finishing

More than one picture can be uploaded at a time

Van-uploader allows multiple entries to be selected

<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" > submit < / van - button >Copy the code

Page({data: {photoUrlList: []}, afterPhotoRead(event) {const {file} = event. Detail; let list = this.data.photoUrlList; this.setData({ photoUrlList: [...list, ...file], }); }, // Delete handleDeleteFiles(e) {const {index} = e.trace; const { type } = e.currentTarget.dataset; if (type === "photo") { const { photoUrlList } = this.data; photoUrlList.splice(index, 1); this.setData({ photoUrlList, }); }}, // Upload images beforeSubmit() {wx.showloading ({title: "Uploading..." , 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(","), }); }), ]); }, // submit toSubmit(e) {this.beforeSubmit().then((res) => {wx.hideloading (); // if the file is successfully uploaded, call}); }})Copy the code

After the encapsulation of the image upload method

/** * @param {* file path} 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: 'system error, please contact administrator ', icon: 'none',}); reject(data); } }, fail: (err) => { reject(err); }, complete: (info) => { }, }); }); }; /** * @returns */ const uploadMultipleFile = (list = []) => {return promise.all (list = []) list.map(async (d) => { if (d.size && d.type) { let data = await uploadFile(d.url); return data.filePath; } else { return d.url; }})); };Copy the code

Validate form submission

Const validRules = {name: {MSG: "please fill in the name ",}, introduction: {MSG:" please fill in the name ",},}; 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; }}Copy the code

The drop-down load

Scroll view match 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>
Copy the code

// 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, }); }}); },Copy the code

An inquiry window pops up from the bottom, showing the action menu

wx.showActionSheet

Wx.showactionsheet ({itemList: [' delete '], 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); }});Copy the code

Whether to enable positioning

First, use the isLocation method to determine the location permission status of the current user

1. If the location permission is not applied, go to askForLocation => askForLocation
2. If the location permission is granted, go to => wxGetLocation

3. Asked, but refused, jump to ask => askForLocation

isLocation() { let _this = this; Wx.getsetting ({success(res) {// If you have never applied for location permission, If (res.authSetting['scope.userLocation'] == null) {wx.authorize({scope: 'scope.userLocation', success() { _this.askForLocation(); }, fail() {}, }); } else if (res.authSetting['scope.userLocation'] == true) {// Query _this.wxgetLocation () if you already have permission; } else {// asked, but rejected, needs to be asked again, and directed to the authorization page _this.askForLocation(); }}}); }, // The popover asks if location is enabled and leads to the location authorization page askForLocation() {let that = this; Wx. showModal({title: 'position authorization ', content:' position authorization is not enabled ', cancelText: 'reject ', confirmText:' enable authorization ', success: Wx. openSetting({withSubscriptions: true, fail: function () {}, success: function () { that.wxGetLocation(); }}); }}}); }, // get location information wxGetLocation() {const _this = this; Wx.getlocation ({type: 'wgs84', success: function (res) {// save location to global app.globalData.latitude = res.latitude; app.globalData.longitude = res.longitude; // Save the location information to this page _this.setdata ({latitude: res.latitude, longitude: res.longitude,}); _this.getList(); }}); },Copy the code

WeChat pay

By calling the back-end interface to initiate payment, the interface returns parameters timeStamp, nonceStr, package, signType, paySign and other parameters, which are used to call the payment interface wx.requestPayment provided by the small program. The specific parameters are as follows

ToPay (orderId) {api.pay_order ({orderId}).then((data) => {if (data) {let result = json.parse (data.result); if (result.timeStamp) { this.toWxPay(result); }}}); }, wx.requestPayment({timeStamp: d.thimestamp, nonceStr: d.ncestr, package: d.passage, signType: Function (res) {wx.showToast({title: "purchase success ", icon: "none",}); SetTimeout (() => {GoPage(" merchant _ mine "); }, 2 * 1000); }, fail: function (res) {}, complete: function (res) {}, }); },Copy the code

Tencent location service – after the map is opened, the specific route can be opened through the local app

const QQMapWx = require(".. /.. /.. /utils/qqmap-wx-jssdk.min.js"); let qqmapsdk; // You need the map to locate the current coordinates and open the local map app chooseThis() {const {longitude, latitude, address} = this.data.info; // You need the map to locate the current coordinates and open the local map app chooseThis() {const {longitude, latitude, address} = this.data.info; const that = this; // Instantiate API core class qqMapSDK = new QQMapWX({key: TX_KEY, // Tencent map application key value}); qqmapsdk.geocoder({ address, success: function (res) { that.setData({ latitude, longitude, }); }}); Wx.getlocation ({type: "gcj02", // return the latitude and longitude that can be used for wx.openLocation success: function (res) { wx.openLocation({ latitude: Number(latitude), longitude: Number(longitude), scale: 28, name: Address, // the name of the address displayed after opening}); }}); }Copy the code

Tencent location services – location selection

Tencent location services – small program plug-in

1. Follow the above link to register KEY values;
2. Splice out the URL that needs to be set to jump to:

// Tencent location service export const TX_KEY = 'po4bz-xTM6j-wkpfg-K6DD3-ltybq-HSFsb '; // Use the key applied in Tencent location service export const TX_REFERER = 'fineFood-weChat'; // The name of the app that called the plugin const TX_CATEGORY = 'gourmet '; // Not required // Not required 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;Copy the code

3. After returning from the map plugin

/ / after returning from map click on plug-in, in page onShow life-cycle function can invoke the plug-in interface, object study results achieved onShow () {const location = chooseLocation. GetLocation (); If (location) {this.setdata ({address: location.address, longitude: location.longitude, latitude: location.latitude, }); }},Copy the code

Vant component library introduced

Method one:

NPM package build, for example vant introduction

1. NPM init Creates a package.json folder
2. Npmi@vant/eapp-s –production installation

3. Wechat Developer Tools > Tools > Build NPM, build and generate miniProgram_npm folder
4. Details > Use the NPM module

5. The component is referenced in the desired page (for example, index.json), and then the component is used in the index.wxml page

\

{
  "usingComponents": {
    "van-button": "/miniprogram_npm/@vant/weapp/button/index"
  }
}
Copy the code

<van-button type="primary"> button </van-button>Copy the code

Method 2:

You can directly go to the Vant Github library, download the component library to the local, and use it directly.

Page jump

Method 1: Use the switchTab to jump to the page in the tarbar:

wx.switchTab({ url: '.. /job/job', })Copy the code

\

Use redirectTo and navigateTo redirectTo pages that are not in the tarBar:

wx.redirectTo({ url: '.. /logs/logs', }) wx.navigateTo({ url: '.. /logs/logs', })Copy the code

OnShow and onLoad

onshow

• This is called every time a page is opened. (After the page loads and you go to another page and you come back and you display the page that was loaded before and then onLoad doesn’t run that’s the page that’s being presented to you and it runs onShow)

onLoad

• When you open the applet and enter the page (onLoad is performed when you click on each TAB in the Tabbar, and onload is not performed when you go from a clicked TAB to another clicked TAB)
• When you modify your code and you click save, it will onload

• Page jump (with arguments, because the page can only get the arguments from options in the onLoad (option) method)
• Wx. navigateTo and wx.redirectTo have query arguments. Note that the wx.switchTab page is already open and will not trigger onLoad