Mini Program That Can't Go Online

Preface

Still my self-used RSSHelper, originally wanted to cross-platform through mini program, discard ionic, later discovered it can't go online

0. Notes

If preparing to make a mini program that wants to go online, be sure to carefully confirm the following points:

1. Can Content Pass Category Review

Level 1 categories are express postal, education, travel, life services, catering, tourism, tools, business services, sports, going down more detailed, then discover there's actually no suitable category...

So release DEMO as early as possible and submit for review to confirm whether content is legal, don't work hard for a month, finally discover cannot go online

2. Can Functions and Interaction Meet Requirements

For example, getting user information, positioning, audio video, files, compass bluetooth accelerator, etc., all mentioned are supported, but to what extent, what restrictions exist, all need to be understood through documentation, even DEMO verification

Halfway through discover XXX function not supported, it's troublesome

For example, currently does not support displaying H5 pages, cannot display directly through mini program (embedding webview, etc.), cannot jump to browser to open, for news Apps, it's an extreme restriction

If wanting to make a self-use mini program, also need to consider above problems, because not going online even self-use is not allowed (preview has expiration limit, half an hour or so)

1. Restrictions

1. API

Mini program API forcibly requires HTTPS:

Settings/Server Domain

request valid domain
socket valid domain
uploadFile valid domain
downloadFile valid domain

Service API whitelist can only be HTTPS domain, otherwise even IDE development environment cannot send requests. If API is still HTTP, can only temporarily use fake data, local mock service also doesn't work, because there's strict domain validation

So first thing is to confirm API supports HTTPS, if not support, move service over ASAP, otherwise need fake data to simulate various APIs, quite troublesome, and after all different from real requests, not conducive to discovering problems early

P.S. About free HTTPS, can refer to [nginx HTTPS Reverse Proxy](/articles/nginx-https 反向代理/)

2. Bundle Size

Source code and resources packaged size cannot exceed 2M, for projects with not many image resources and pure manual work it's okay, if:

• Many image resources

• Depend on some third-party libs

• Project scale is relatively large (code volume)

If first-level page first-screen image resources are very many, besides compression there's no better method, non-first-level page first-screen images can be put on server. Third-party libs use as little as possible, under 2M limit, introducing third-party libs must be carefully considered. Project itself is very large, for example hundreds of thousands of lines of code, gg, this counts as large program

P.S. If bundle size exceeds 2M, cannot submit compilation package, prompts to delete files and retry

3. Account Type and Certification

Same as official account management method, distinguishes personal account, enterprise account, certified or not, etc.:

Card coupon API requires certification
Open platform binding mini program requires developer qualification certification

P.S. Whether personal official account or personal mini program, cannot certify, don't even give chance to pay money

Compared to difference between subscription account and enterprise account, mini program has fewer restrictions, only card coupon API has limits. For official account binding mini program, actually no strict limits (no limit on account type and certification or not, but has quantity limits)

Additionally, personal official account cannot register mini program (can associate mini program, provide entry), so had to reluctantly create another email

Temporarily does not support individual/media/government/other organizations quickly creating mini programs, please complete registration according to normal process.

4. Content Review

Divided into 2 parts, category review and function review

Main reason for difficulty going online is category review, currently only supports some App types, restrictions far greater than imagined, currently seems concentrated on information query, orders, etc.

Category review has no room for negotiation, if review result clearly points out temporarily not opening this category, can only give up first

Function review is testing, unfriendly interaction, function unavailable, too simple, etc. can all be reasons for being sent back, but problems that can be solved by modifying code are naturally not problems

5. Does Not Support Recursive Templates

Declare and reference template:

<template name="node">
  <text>{{node.text}}</text>
  <block wx:for="{{node.children}}">
    <template is="node" data="{{item}}"></template>
  </block>
</template>

<template is="node" data="{{node}}"></template>

Hope to display tree data:

node: {
  text: 1,
  children: [{
    text: 2
  }, {
    text: 3,
    children: [{
      text: 4
    }]
  }]
}

Result only displays 1, no recursion downward, cannot satisfy need to display infinite hierarchy scenarios

To solve HTML parsing rendering problem, someone thought of a笨 method, copy n templates, sequentially nest:

<template name="node-level0">
  <text>{{node.text}}</text>
  <block wx:for="{{node.children}}">
    <template is="node-level1" data="{{item}}"></template>
  </block>
</template>

// copy node-level1
// copy node-level2
// copy node-level3
// ...

This way however many copies, can support that many levels, disadvantage is template file will be huge, maintenance is also a problem, but currently still no better way

2. Project Demo

After trying adopted this structure:

common/
  cache/        memory cache, persistent cache
  components/   shared components
  pages/        public pages
    detail/
    list/
  request.js    API wrapper
config/         constant configuration
image/
pages/          each independent page
  tab1/
  tab2/
utils/
<3rdLib>/       third-party dependencies
app.js          entry
app.json        application-level configuration
app.wxss        application-level styles

Need to note page declaration issues:

• All independent pages must declare path in app.json's pages

• pages first item is homepage, subsequent adding/removing pages all need to modify pages configuration

• tabBar's first item must be consistent with homepage, otherwise tabBar doesn't display and no error

Configuration related some problems, no errors at all, very hard to troubleshoot

Used a HTML support library (999 stars, shows HTML display demand is very strong), responsible for parsing HTML, converting to mini program native components for display

Currently not very perfect, parsing result tag count is large (no obvious performance problems found on iOS, but definitely has optimization space), additionally, for pre, code, span etc. support effect is relatively poor, code display effect not good. Can service convert code to images, once and for all, or manually perfect this library (structure very simple, easy to extend)

After API made HTTPS, 3 days development completed, photos as follows:

[caption id="attachment_1398" align="alignnone" width="625"] wx_RSSHelper_1[/caption]

[caption id="attachment_1399" align="alignnone" width="625"] wx_RSSHelper_2[/caption]

3. Development Experience

Advantages:

• Complete set of development debugging tools (debugging experience very good)

• CSS support very good (styles scraped from H5, basically can use directly)

• ES6 development environment

• Business framework easy for people to accept (data binding etc. template syntax similar to vue)

Disadvantages:

• IDE very hard to use

• Documentation incomplete (how to implement pressed state styles, etc., completely no documentation)

• Going online difficult (strange category review, very hard to find accurate category, review efficiency average)

• Configuration too high not flexible (some functions can only be completed through configuration items, for example tab bar, quite strenuous)