As an Android programmer, I had no experience with front-end development until I was fortunate enough to take over the company’s applets project. Small programs are still very fast to learn, for people with programming experience, looking at the sample code, against the official documentation, can be used in a few days.

Since contact small program, always want to make a own thing, if some people use every day better.

One day and my baby play idiom solitaryong, suddenly thought, I can do a small program of idiom solitaryong ah!

product

After thinking about it for two days, I would like to make it like this:

  • Solitaire can have “all participation”, “designated group member participation” and other types

  • Do not check whether it is an idiom, otherwise you can not use “print thief do father”

  • The pronunciation of idioms, or to check

  • It is hard to avoid someone to fill, so each idiom can praise, can also step on

  • Leaderboards can be added after a certain amount of data is available

design

With that in mind, there are two tricky things to do:

  • Give it a cool name

  • Begging my baby to draw me blueprints

I thought of a lot of names, “idiom”, “continue”, “catch”, “catch a”…

Bao Bao: low explosion, called “touch word”, touch also has the meaning of connect, idiom is also a word

It’s amazing that someone thought of the name of 6 first, so they finally decided to use “Touch word ER”.

Put two design drawings casually, beautiful and picturesque what not to say:

Here are a few things that I think are worth mentioning in terms of development.

Obtaining User information

Now most of the small programs are opened, pop up user information authorization box, some even forced to use authorization. The one I made before also needs to get the unionId to log in before it can be used, for which I also wrote an article explaining how to achieve it.

But apparently, wechat thought it was a bad experience. Before the user does not touch your small program, why should trust you, expose their user information to you.

In order to standardize the acquisition of user information, this official article is published: Introduction to the acquisition of user information scheme (THERE are two questions in FAQ or I raised).

Just take this small program to practice.

First, figure out when you need user information. The user information is required to be displayed next to the idiom, so you need to get the user information before you can create a dragon or send the idiom. If you just come in to have a look, you do not need any authorization, only click the button to create solitel, or send the idiom button, will pop up the authorization prompt box.

Here’s how I did it. If there is no user information, set the open-type of the button to getUserInfo. Clicking on the button will trigger the retrieval of user information. If there is already user information, it is a normal jump button:

<view class="create-button">
  <button wx:if="{{hasUserInfo}}" class="button" bindtap="navigateToCreate">
    <image class="img" src="/images/icon_add.png" mode="aspectFit"/>
  </button>
  <button wx:else class="button" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
    <image class="img" src="/images/icon_add.png" mode="aspectFit"/>
  </button>
</view>Copy the code

When the user is authorized, the user information can be retrieved from the bindGetUserInfo binding method using e.dail.userinfo.

Opentype =”getUserInfo” is not available until base 1.3.0, so it is better to make it compatible with older versions.

Group of ability

At present, the small program has been supported to obtain the wechat group ID and display the group name.

When the type of solitons created by the user is a specified group member, the specified group is the first group forwarded to. And members also only through the group to share into the small program, can participate in solitoring. Here’s how we get the group ID in both cases.

On a shareable page, call wx.showshareMenu () to display the forward button. Add the onShareAppMessage method and set it to share information:

OnShareAppMessage: function () {var that = this return {title:" , path: 'pages/xxx/xxx? id=' + this.data.id, success(res) { that.getShareInfo(res.shareTickets[0]) } } }Copy the code

In the getShareInfo method, we need to get the share information. Now all we can get is the group ID:

Wx.getshareinfo ({shareTicket: shareTicket, success(res) {// Obtain openGId}})Copy the code

As with getUserInfo, the data is encrypted, and res.encryptedData and Res. iv will be sent to the background for decryption. The encryption is the same as userInfo, so it can be decrypted using the same interface. The decrypted openGId is the group ID we want.

As for the entry from wechat group, we need to work on the onLaunch method of app.js. A scenario value is available in the onLaunch method, which distinguishes the various scenarios for entering the applet. The description of each scenario value can be found here. It can be seen:

When the scenario value is 1044, we might get the shareTicket we carry:

onLaunch: function (ops) { if (ops ! = null && ops.scene == 1044) { this.globalData.shareTicket = ops.shareTicket } }Copy the code

Then decrypt the shareTicket to obtain the openGId and determine whether the user can participate.

Chat list

As can be seen from the design, the list of idioms is at the bottom, similar to the effect of wechat chat. But the list is at the top by default, so how do you get it to the bottom?

In fact, this is very simple, using the scroll into view property of the scroll view component:

Notice one detail here, id can’t start with a number, but what if my ID starts with a number? Just put a random letter in front of it:

<scroll-view class="scroll" scroll-y="true" scroll-into-view="x{{toView}}">
  <! -... -->
</scroll-view>Copy the code

I also want to put an x before the ID of item.

Then, after obtaining page data setData, position the list to the bottom:

setTimeout(function () {
  that.setData({
    toView: list[list.length - 1].id
  })
}, 300)Copy the code

There is a certain amount of latency, as page rendering takes a bit of time, and it can take a lot of time on different phones. I’ve seen a few phones, and 300 milliseconds is probably the right number.

If you want to slide to the top to load more, use the bindScrolltoupper property:

When you get more, set toView to the ID of the last item in the newly obtained list.

Floating button

The button in the bottom right corner of the home page is pretty, but it can be a bit of an obstacle.

Android has a control called FloatActionButton that slides down to hide the list as it scrolls, and I tried to implement a similar effect in an applet.

I think occlusion actually only affects the bottom of the list, so hide when the list rolls to the bottom, scroll and show.

Without using scroll view, the onReachBottom method will be triggered when the page hits the bottom, and the onPageScroll method will be triggered when the page scrolls, so this function can be implemented like this:

js

OnReachBottom: function (event) {this.setData({showBtn: false})}, onPageScroll: Function (event) {this.setData({showCreateBtn: true})}Copy the code

wxml

<view class="button {{showBtn? 'show-button':'hide-button'}}"/>Copy the code

wxss

.show-button {
  transform: translateY(0);
  transition: 0.3 s;
}

.hide-button {
  transform: translateY(180rpx);
  transition: 0.3 s;
}Copy the code

Is it very simple, the effect is good:

But there are two holes in it:

  1. On the developer tools, this is fine, but on the real machine, onPageScroll is triggered when the list reaches the bottom and triggers onReachBottom. What I do is I don’t show the button for 300 milliseconds after onReachBottom.

  2. When the list height is lower than the screen height, sliding up the list will also trigger onReachBottom, but will not trigger onPageScroll, causing it to hide and not show again. The solution is to determine whether the list is scrollable and not hide the button if it is not.

conclusion

In the beginning, without promotion, I would get 100 or 200 new users a day when people around me didn’t want to play. After knowing the recommendation of the program last time, there are now 2,000 new users every day! I can’t afford to pay the traffic fee. Thank you very much for your support.

Finally, thank my baby for making such a beautiful design.