introduce

Project introduction

WeScale is positioned as a small program for music training, initially planning the three training of basic scales and their mirror mode.

  • Digital chords
  • The letter d
  • Simplified numerals versus simplified letters

Later update additional training depending on the situation.

Product display

Scan the small program code below or search for WeScale in wechat small program to use it.

The staff

  • Myou Aki: Mingshen, north drift front, there are always strange ideas to achieve, suitable for the front end of the product

  • Dr.Chan: Lao Chen, a handsome and pleasant mouth-to-mouth foodie from Maoming, eats both back end and front end

  • Jackliu: Dajian, product, fake front end, products that don’t want to be front end are not good drivers

origin

Minggod every night to practice his electric guitar, knocking his wooden fish, suddenly a light flashed in my mind, he quickly captured the wit, that night at three o ‘clock in the morning finished the small program prototype.

Chen and I used to run A stock helper – Stock – Helper, this time mingshen led the way, we wanted to accumulate some experience in small program development, so Chen and I got on the car. (Drop ~~ student card)

Meituan just opened the source of MPVue, which quickly gained thousands of stars in just a few weeks. Before mpVue opened the source, wepy was the most popular one. It is said that with MPvue, we can use Vue to write wechat mini programs smoothly like Dove, so we began to step on the road of pit.

Project statistics

It is expected to be finished in a week. After all, we all have serious things to do, so it has been put off until two weeks. The four branches have been submitted for 51 times in total, with more and more submitted by the deadline. Version V1.0.0 has been released and has been reviewed and put online.

Step on the pit

  • Wechat applets cannot use local resources

This pit is very common, wechat small program does not support local reference pictures, audio, video, so need external chain. You can also use Base64 encoding for images and reference them directly in HTML or CSS. According to the picture according to the picture size or maintainability consideration, use outer chain or Base64 encoding as appropriate.

  • NPM run dev is required for adding pages

This is an MPVue problem. Common problems can be found. The solution is to manually NPM run dev.

  • Life cycle problem

Mpvue is compatible with the life cycle of wechat applets and the life cycle of vue, that is, the vue instance will take over the life hook of the Page instance of the applets. Therefore, when you need to use the life cycle hook of the applets, you can define the corresponding hook method in the Vue instance, for example, to define the shared title content picture of the current Page:

new Vue({ data () { return { score: '' } }, onShareAppMessage (res) { return { title: 'I get' + this.score + ', come on and master the basics of scales! ', path: '/pages/index/index', imageUrl: 'https://wechat.dddog.com.cn/static/wescale.jpg' } } })Copy the code

Vue mounted()/onload()/ onload()/ mounted()

  • Class is bound to Style

The classObject and styleObject syntax in the Class and Style bindings is not supported. The use of Class and Style bindings on components is not currently supported

If you don’t support it, don’t use it

  • No BOM/DOM operations

Mpvue allows developers to use standard HTML and CSS to write small programs. When we check the dist folder in mpVue project, we can find that the written HTML and CSS are parsed into WXML and WXSS of small programs. Although the running environment of the small program is not a standard WebView. Therefore, browser and Navigator instances that we often use for Web development are not available. Instead, we use the API provided by the mini-program browser — WX instance to operate native elements. As for DOM manipulation, it’s not recommended even in VUE, so use data-driven transformations instead. This means that all BOM/DOM operations will not work. When using the VUE third-party UI library, note that Dom and Bom related API operations are not implemented. Solution: this is mainly animation can not use, then use CSS3 ~

  • The component name should not be the same as the wechat component name

I tried to write a component of SWicth, but found the rendering result was wrong. After checking the reason, I found that wechat applet also has a component of switch. Solution: Change your name. Naming conventions!

  • Wechat applet multichannel

According to the normal routine to use the small application API — wx. CreateInnerAudioContext () is unable to create multichannel. The difficulty of this technology also lies in how to create multi-channel micro channel small program. I’ve been going around, and there’s very little information on this. Find a blog post and call it in turn by creating multiple innerAudioContext instantiations. I must disagree with the original author who said that the applet can only have 5 audio instances at once. After all, I just created 30 of them, haha

const audioContextNum = 30
let globalAudioContext = Array.from({ length: audioContextNum },
  (v, k) => wx.createInnerAudioContext())
Copy the code

How to find the currently available sound channel is also a difficulty. The general idea is to block the playing instance and cancel the blocking when the onEnded() callback of the instance is executed. When using it, you need to traverse all instances to find the currently available instance and see the instance code (deleted and changed with the actual code) :

/ / automatically find a currently available audioContext instance export function playedMusic (url) {let contextList = store. The getters. GlobalAudioContext while (contextList ! == store.getters.audioContextStatus.map(item => item === false).length) { let audioContextStatus = Store. Getters. AudioContextStatus let index = store. The getters. CurrentAudioIndex / / if the currently available, If (audioContextStatus[index]) {store.mit ('setAudioContextStatus', {index, status: False}) break} else {// otherwise ++index store.com MIT ('setCurrentAudioIndex', ++index) } } const resultPromise = new Promise((resolve, reject) => { contextList[index].onPlay(() => {}) contextList[index].onError((res) => { reject(res) }) contextList[index].onEnded((res) => { reset(resolve) }) }) return resultPromise }Copy the code
  • Cache of wechat applets

Found in actual development process. If the audio is not cached in advance, the actual playback will have a certain delay, depending on network conditions. The solution is to preload it and store it in a small program cache. The official website says that the cache is 10 meters, enough for use. DownloadFile wx.downloadfile (), get tempFilePath, save the temporary file as a local file wx.savefile (), get savedFilePath, and store the path of the local file in the cache wx.setstorage (). So many asynchronous operations, of course, wrapped in Promise.

Multi-file download, save, cache, callback, recursive ideas:

Loading _load(0, () => {// Change the config object properties of audio-.js. config.musicUrl = JSON.parse(musicUrlTemp) const temp = JSON.parse(musicUrlTemp) temp.tempVerison = tempVerison wx.setStorage({key: 'musicUrl', data: temp}) wx.hideLoading() }) function _load (index, callback) { if (! musicUrlArr[index]) { callback() } else { downloadFile(musicUrlArr[index]).then((tempFilePath) => { saveFile(tempFilePath).then((savedFilePath) => { musicUrlTemp = musicUrlTemp.replace( musicUrlArr[index], savedFilePath ) index++ _load(index, callback) }) }) } }Copy the code

Whether the cache exists and the judgment of the cache version:

If (temp && temp.tempVerison === tempVerison) {return false}Copy the code
  • The global variable

Encounter many need global variables, especially the state, the best unified management. Vuex for Vue is a state management mode developed specifically for vue.js applications. The problem is that it cannot use its auxiliary functions mapState, mapGetters, mapActions, mapMutations, etc. Look at the issue of MPvue and it seems to be a problem of MPVue. Solution: Use primitive store.mit (), store.getter

  • Data analysis and legitimate domain names

The HTTPS protocol is required for web requests such as wx.request() and wx.downloadfile () that invoke wechat applets. The data analysis of wechat needs to obtain access_token every two hours, which is the configuration of the server side.

Conditions: domain name and domain certificate, server

Obtain token and server write interface return static file and wechat data analysis interface can refer to this, Node.js write, write very casually, casually look at.

  • ES6 module dynamic reference

Reference blog:

  1. Values in ES6 modules are dynamic read-only references. Just to illustrate complex data types.
  2. For read-only, that is, it is not allowed to change the value of the imported variable, and the imported variable is read-only, whether it is a basic data type or a complex data type. When a module encounters an import command, it generates a read-only reference. When the script is actually executed, it will be evaluated in the loaded module based on the read-only reference.
  3. For dynamic, when the original value changes, so does the value that the import loads. Both basic and complex data types.
// b.js
export let counter = {
  count: 1
}
setTimeout(() => {
  console.log('b.js-1', counter.count)
}, 1000)

// a.js
import { counter } from './b.js'
counter = {}
console.log('a.js-1', counter)

// Syntax Error: "counter" is read-only
Copy the code

You can’t reassign counter to a new object, but you can add properties and methods to the object. No errors are reported at this time. This behavior type and the use of the keyword const.

// a.js
import { counter } from './b.js'
counter.count++
console.log(counter)

// 2
Copy the code

Thank you

Thank you to all those who participated in product development, testing and contributed creative ideas and suggestions.

We have a small team, self-deprecated as “salted fish technology”, who said salted fish can’t have dreams, haha. We also need UI, operation, etc. If you have ideas, creativity, skills can join our small team! 2333 –