Internet giants are keen to build platforms, hoping to build their own ecosystems, and rely on eco-companies to develop a variety of applications to meet the needs of users. There are two big problems: the legs of the giants need to be big enough for eco-companies to spend time and energy on these platforms; On the other hand, how to control these ecological companies to ensure that they can provide a relatively consistent user experience, so that there will not be a “thriving ecology, but the experience is down” situation, small programs emerge as The Times require. After wechat released mini programs in 2017, all the Internet giants launched their own mini programs. But only micro channel small program support individual developers, other small programs are required to enterprise certification, gu this special edition can only take micro channel small program as an example, combined with small program development of their own specific talk about how to carry out small program development.

Applet application

Small application is relatively simple, only need to prepare a mobile phone number and an email. Note that the mailbox must not be bound with other small programs or public accounts. The number of small programs and public accounts bound before the mobile phone number should not exceed 5. Need to remind is: small program service type is different, audit standard will also be different. Tool class applets are easier to review and do not require additional material to submit. After successful registration, record the appKey and appSecret of the small program, which will be often used in the subsequent development.

Environment set up

Small program development needs special development tools, you can go to the official website to download and install. Open the development tool, fill in the application applet appId, the development environment is set up.

Introduction to directory Structure

Applets contain an app that describes the overall program and multiple pages that describe each page. A small program body consists of three files that must be placed in the project root directory, as follows:

A small program page is composed of four files, which are:

The development of actual combat

Next introduce before do a small program: “tool treasure box”, I will be divided into more than one of the tools inside each. First, introduce how a home page is implemented. Tool Treasure Box There are two tabs at the bottom of this little program, one is a list of tools, one is mine. This just needs to be configured in app.json:

{
 "useExtendedLib": {
    "kbone": true."weui": true
  },
  "entryPagePath": "pages/index/index"."tabBar": {
    "selectedColor": "#f47920"."backgroundColor": "#f2f2f2"."list": [{
        "pagePath": "pages/index/index"."text": "Tools"."iconPath": "/resources/icons/tools-not-selected.png"."selectedIconPath": "/resources/icons/tools-selected.png"
      },
      {
        "pagePath": "pages/my-profile/my-profile"."text": "I"."iconPath": "/resources/icons/my-profile-ori.png"."selectedIconPath": "/resources/icons/my-profile-selected.png"}}}]Copy the code

“EntryPagePath “: “pages/index/index” indicates that the index page is opened after the application is started, that is, the tool list page. The tool list page is relatively simple, using only the usual list rendering. The code is as follows:

<view class="page" data-weui-theme="light">
  <view class="page__bd linui-mt-16 linui-mlr-5">
    <view class="weui-grids">
      <navigator class="weui-grid" wx:for="{{toolList}}" url="{{item.url}}" wx:key="text">
        <view class="weui-grid__icon">
          <image src="{{item.icon}}" alt></image>
        </view>
        <view class="weui-grid__label">{{item.text}}</view>
      </navigator>
    </view>
  </view>
</view>
Copy the code
// index.js
// Obtain the application instance
const app = getApp()

Page({
  data: {
    toolList: [{text: "The wheel makes the decision.".icon: ".. /.. /resources/icons/wheel.png".url: ".. /wheel-config/wheel-config"
      },
      {
        text: "Hand-held rolling bullet screen".icon: ".. /.. /resources/icons/subtitles.png"
        , url: ".. /subtitle-config/subtitle-config"
      }, {
        text: "Flash screen".icon: ".. /.. /resources/icons/rainbow.png".url: ".. /rainbow/rainbow"
      }, {
        text: "Couple's nickname.".icon: ".. /.. /resources/icons/love.png"
        , url: ".. /love-nickname/love-nickname"
      },
      {
        text: "Amount capitalized".icon: ".. /.. /resources/icons/money.png".url: ".. /money-upper/money-upper"
      },
      {
        text: "Generation of QR code"
        , icon: ".. /.. /resources/icons/qr-code.png"
        , url: ".. /qrcode/arcode"
      }, {
        text: "This machine IP"
        , icon: ".. /.. /resources/icons/ip.png"
        , url: '.. /ip/ip'
      }, {
        text: "IP query"
        , icon: ".. /.. /resources/icons/internet.png"
        , url: ".. /search-ip/search-ip"
      }, {
        text: Md5 encryption ""
        , icon: ".. /.. /resources/icons/md5.png"
        , url: ".. /md5-tool/md5-tool"}]}})Copy the code

Save the file, the development tool will automatically compile, you can see the home page.

conclusion

The following will introduce each tool is specific how to develop, like friends remember to pay attention to oh ~