preface

Summary of functional requirements and problems actually encountered during the development of the project. Some of the articles and official documents referred to at the time are listed. Development framework: MPvue official documentation: 5 minutes quick start

Small program jump outside chain

Reference article: Applets jump to the external link address of a non-applets page

  1. The link to jump to must be HTTPS
  2. You need a Web-view component, which is a container that can be used to host web pages and automatically fills the entire applet page. (Personal type and overseas type of small programs are not supported. That is to say, the individual application of small procedures, do not want to jump)
  3. You need to configure the business domain name in the background of the small program, which is the domain name you want to jump to the web address. (Settings – Development Settings – Business domain name)
  4. When configuring the service domain name, you are required to download the verification file. The file must be placed in the root directory of the external link address, which may require O&M assistance
  5. If a new domain name is displayed on the secondary page, repeat the preceding steps

Small program internal page jump

Official document: Small program page jump

Compatibility with lower versions

In order to solve the problem that the base library of the earlier version is not compatible with the new functions of the applet, the developer can set the minimum base library version requirements for the applet.

Developers can log in to the mini program management background and enter “Settings – Basic Settings – Basic Library Minimum version Settings” to configure. Before configuration, developers can view the percentage of base library versions used by users who accessed the current applets in the last 30 days to help developers understand the current user usage.

Official documentation: Compatibility with earlier versions

Mapping between the wechat applets basic library version and the client version

Small program iphonex adaptation

Reference article: wechat apPLETS API device get system information getSystemInfo

Reference article: wechat applets for iphoneX

Mpvue support less

See article: 2 Steps to Configure MPvue to support less

Applets life cycle

See article: Applets life cycle

Official documentation: Mpvue life cycle

Pit point: the button in the upper right corner just backs the small program to the background, and does not close the small program, so if not processed, the next entry or exit before the last state. The page will not be refreshed like the H5. There is also no open destruction applet listening. Foreground and background definition: When the user clicks the upper left corner to close, or press the Home button of the device to leave wechat, the small program is not destroyed directly, but enters the background; When you enter wechat or open the small program again, you will enter the foreground from the background.

Swiper spacing rotation

Reference article: wechat applet uses swiper component to realize 3D – like rotation map

See article: small program swiper component to achieve different effect spacing rotation

Finally, the third method I used in the second article was to use an Animation object. In the first article, I used CSS transition directly. The Animation was not smooth.

Swiper component bug:

Reference article: wechat small program Swiper component stuck back and forth crazy round casting

Applets introduce external fonts

Reference article: How does applets introduce external fonts using method two inside

Preview picture

The menu bar (Save photo, Share Photo, Save Photo) can only be lifted by long pressing the image after the image is previewed in full screen.

See article: Image preview

Save pictures to albums

Applet save picture to local authorization problem

Export function saveImg (imgURL) {wx.showLoading({title: '... '}) wx. DownloadFile ({url: imgurl, success: function (res) {/ / images saved to the local wx. SaveImageToPhotosAlbum ({filePath: Res. tempFilePath, success: function (data) {wx.hideloading () wx.showmodal ({title: 'Pictures have been stored in album ', Content:' Good things to share, send to friends to see. ', showCancel: false }) }, fail: function (err) { console.log(err) if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === 'saveImageToPhotosAlbum:fail auth deny' || err.errMsg === 'saveImageToPhotosAlbum:fail authorize no response') { // We have adjusted wechat, it must be triggered in the button, so we need to call wx.showModal in the pop-up callback ({title: 'prompt ', content:' Need you to authorize to save album ', showCancel: false, success: modalSuccess => { wx.openSetting({ success (settingdata) { console.log('settingdata', Settingdata) if (settingData.authSetting [' scope.writephotosalbum ']) {wx.showModal({title: 'hint ', content: Else {wx.showModal({title: 'prompt ', Content:' Failed to get permission, will not be able to save to album! ', showCancel: false }) } }, fail (failData) { console.log('failData', failData) }, complete (finishData) { console.log('finishData', finishData) } }) } }) } }, complete (res) { wx.hideLoading() } }) } }) }Copy the code

Forward applet

1. The forward button is displayed

wx.showShareMenu(Object object)

  mounted () {
    wx.showShareMenu({
      withShareTicket: true
    })
  },
Copy the code
2. Customize the title and picture for forwarding

OnShareAppMessage (Object) listens to the behavior of the user clicking the forward button in the page (<button> component open-type=”share”) or the “forward” button in the menu in the upper right corner, and defines the forward content.

OnShareAppMessage (Object)

The value of mpvue is similar to that of Mounted

  onShareAppMessage: function (options) {
    return sharehanle(options)
  },
Copy the code

Handle Settings for menu sharing and button sharing of custom titles, images, etc.

Export function sharehanle (options) {// var that = this // Sets the forwarding content when the forward button in the menu triggers the forwarding event console.log(options) var shareObj = {title: 'share title ', // default is the name of the applet (slogan, etc.) path: '/pages/index/main', // default is the current page, must start with a '/' full path imageUrl: ", // custom image path, can be a local file path, code package file path or network image path, support PNG and JPG, if not passed imageUrl use the default screenshot. Display image aspect ratio is 5:4 SUCCESS: Function (res) {if (res.errmsg === 'shareAppMessage:ok') {console.log(' shareAppMessage:ok')}}, fail: Function (res) {if (res.errmsg === 'shareAppMessage:fail cancel') {else if (res.errmsg === = 'shareAppMessage:fail') {// The forwarding fails, where detail message is the detailed failure information}}, complete: If (options.from === = 'button') {// var eData =. If (options.from === 'button') {// var eData = Options.target. dataset // console.log(edata.name) // shareBtn // // You can modify the shareObj // shareobj.path = /pages/ btnName /btnname? Btn_name =' + edata. name/ /} // return shareObj return shareObj} export default {sharehanle}Copy the code

Wechat comes with loading, hints and popover apis

1. loading
Wx. showLoading({title: 'Picture saved... '}) hide wx.hideloading ()Copy the code
2. Modal
Wx. showModal({title: 'prompt ', content:' Permission obtained successfully, click the button again to save ', showCancel: false})Copy the code
3.Toast
Wx.showtoast ({title: 'submit successfully ', icon: 'succes', duration: 1000, mask: true})Copy the code

statistical

The official documentation

Custom analytics, which is statistics on button clicks and so on, are used.

other

  • Background-image can only be a network URL or base64. Local images need the image tag.

  • There are video playback in the small program, there will be qualification problems when reviewing, need to use encapsulated video plug-in

  • Template message sent by the background. FormId is provided when the front-end submits data. See the applet Form component for details

  • The mpvue event parameters are passed in with $event via binding, using swiper as an example

<swiper class="sub_swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :previous-margin="previousMargin" :next-margin="nextMargin" :current ="curMovieIndex" <! --> @change="handleChange($event)"> <block v-for="(item, index) in datalist" :key="index"> <swiper-item> <div class="item" :class="{'active_item': curMovieIndex === index }" :animation="index == curMovieIndex ? animationData : animationData2"> <image class="img" :src="item.coverImg"></image> </div> </swiper-item> </block> </swiper>Copy the code
HandleChange (e) {// let oIndex = e.mp.dail.current // change swiper to show index store.mit ('setCurMovieIndex', oIndex) this.changeActive() this.changeNormal() },Copy the code