People spend 90% of their life doing boring things. With the development of society, we have more and more leisure time. Besides work, we spend the rest of our time on various recreational activities.

Programmers are a bit of a special breed. They spend a lot of time coding as part of their entertainment. This is not boring recently made a pocket guitar small program, using BMob back-end cloud to provide data storage services, in addition to guitar spectrum pictures, other pictures stored in seven cattle.

The bMob applet development documentation is detailed and concise, mainly to shorten the development cycle, but for complex projects, it is recommended to use your own server to provide data services.

Use wechat to scan the QR code for preview

Github.com/alex1504/wx…

The following points to share the key points and feelings in the development process of small programs:

  1. Applets tags are called components, and Html tags are called elements.
  2. Some of the content is compared to Vuejs and jQuery

Use iconfont font ICONS

Create a new project and add an icon

@font-face {
  font-family: 'iconfont';  /* project id 431644 */
  src: url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.eot');
  src: url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.svg#iconfont') format('svg');
}
Copy the code

Define generic icon styles and define pseudo-elements

.icon{
  display: inline-block;
  font-family: 'iconfont';
}
.icon-home::before{
  content: "\e600";
}
Copy the code

use

<view class="icon icon-home"</view>
Copy the code

Applets event bindings and handlers

There is no v-model like vuejs for two-way binding. Bindinput like jQuery is used to listen for input events and update data in the event handler. The event object E.data. value can obtain the input value.

// BindConfirm listens for keyboard return events, and the soft keyboard pops up automatically when the focus attribute focuses the rendering component<input type='text' placeholder='Song Name/Artist' bindinput='bindSearchInput' bindconfirm='onSearch' focus></input>
Copy the code
bindSearchInput(e) {
  this.setData({
    searchTxt: e.detail.value
  })
}
Copy the code

The event handler in the applet does not pass in parameters as vue does, because the event handler only has a default parameter event object. If you want to get the id of the element binding in the component of the for loop, you can bind the data attribute in the same way as jQuery.

<! <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{banner_list}}" wx:key="{{index}}">
    <swiper-item bindtap="navigateToDetail"  data-id="{{item.href}}">
      <image src="{{item.image}}" class="slide-image" mode="widthFix"></image>
    </swiper-item>
  </block>
</swiper>
Copy the code

Get id:

// Event handlers
navigateToDetail: function (e) {
  const id = e.currentTarget.dataset.id;
}
Copy the code

Prevents events from bubbling

Bindtap, BindLongTap, BindTouchStart, BindTouchMove, BindTouchEnd, bindTouchCancleCopy the code

Replace bind with catch to prevent bubbling events

setData

The view update of the applet requires a call to setData to modify the binding data. Modifying the data directly will not trigger the view layer update. SetData takes an object as an attribute that needs to be added or modified. Attribute names are a bit special. Values in [] are recognized as variables, so if you want to modify an attribute in an array of objects, you must pre-concatenate the attribute name. Wrong practice:

Love_flag ': 2 // SyntaxError: unknown: Unexpected token this.setData({ 'searchSongs[' + index + '].love_flag': 2 })Copy the code

Do it right:

setSongFlag(e) {
// Note that non-integer values in the setData attribute name [] are recognized as variables
let key = 'searchSongs[' + index + '].love_flag'
this.setData({
  [key]: 2
})
Copy the code

About the Image component

WXSS background-image and image components do not support local URLS. In the development of H5, we usually use the IMG tag for some images that do not need to choose display mode according to the size of the container, and use background for some special display mode. But the applets only need the Image component. It provides the mode attribute and background definition image and img element to control the image display contrast

Mode attribute background-size HTML img element
scaleToFill 100%, 100% (the default) width:100%; height:100%
aspectFit contain Js implementation
aspectFill cover Js implementation
widthFix 100%, auto width: 100%;

The top, bottom, right, and left attributes that do not scale the image position are the same as background-position. The img element can only be controlled by positioning.

Applets API asynchronous scheme

If you are not obsessive-compulsive, the apPLETS API uses the default callback. In addition, because small programs only support ES6 and do not support async and await, API can also be encapsulated as a promise.

function promisify(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) = > {
      obj.success = function (res) {
        resolve(res)
      }

      obj.fail = function (res) {
        reject(res)
      }

      fn(obj)// execute the function. Obj is the argument passed to the function}}})module.exports = {
    promisify: promisify
}
Copy the code

Use:

const promisify = require('./promisify.js')
const request = promisify(wx.request);

request({
    url: 'some URL'
    method: 'GET',
}).then(res => {   
    console.log(res)                 
}
Copy the code

Small program problem

  • Debugger does not have CSS prompt function and color panel, affecting layout and color adjustment efficiency (random style)
  • Unable to import third-party JS libraries
  • The built-in components are monotonous and do not take into account adaptive situations with a large number of fonts
  • Skipping external links is not supported
  • The background image or image component cannot use local images

Release or update about small program review

Small procedures online need to be audited, release two processes. After passing the review, full update, or release in stages, the small program will be updated, the first release has no option.

Full release: Release the new mini program to all wechat users in real time. Phased release: The new mini program will be released to wechat users within 15 days at a ratio customized by the developer. See Zhihu for details: What does it mean to choose full release and phased release when releasing mini programs?

Have to say small program audit speed is very fast, even personal application (compared with corporate account application will have application service type restrictions), usually small program does not involve the content of the policy does not permit or more than small program allows the application of service type, are all can pass, experience for the first time, even during the National Day, there is a work team for review, The review time is usually within a few hours.

conclusion

In the development of this small program, wechat small program only support page-level development, now the small program has supported component development and plug-in development. The structure of a component is no different from that of a page. A custom component can be introduced into other components. For specific development steps, you can refer to this article [wechat applets] custom components

Small program makes the front-end development and rise of a task, but it also makes the front-end programmers a growing sense of achievement, of course not experienced engineers in the browser plantation s experience this poignant, but don’t have to, as long as keep up with the trend of The Times and pay attention to the infrastructure itself has enough, the front road hardships, I share with you on the way.