Those small micro-channel program development shortcomings

As early as Wen micro-channel program is a small hole, the result of well-deserved reputation, breakdown of what I developed a small program to come across the pit.

 

UI components over the package.

Micro-channel assembly imitate react.js applet or a web vue.js component design, and the package style weui.css.

PS: implement a custom multiple choice or multiple choice. (Look at the issue of small micro-channel application development community, it is not a complete solution, then find their own way a way)

wxml

<checkbox-group class="checkbox-group">
      <label class="checkbox-label">
          <checkbox value="A"></checkbox>
          <view class='checkbox-text'>A</view>
      </label>
      <label class="checkbox-label">
          <checkbox value="B"></checkbox>
          <view class='checkbox-text'>B</view>
      </label>
      <label class="checkbox-label">
         <checkbox value="C"></checkbox>
         <view class='checkbox-text'>C</view>
      </label>
</checkbox-group>

wxss

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-label {
  width: 33.3%;
}

.checkbox-text {
  background: #fff;
  position: relative;
  text-align: center;
  border: 1px solid #000;
  margin-right: -1px;
  margin-bottom: -1px;
}

checkbox {
  display: none;
}
checkbox[checked] + .checkbox-text {
  color: #fff;
  background: red;
  border: 1px solid #000;
}

effect

 

Syntactic sugar hodgepodge various front-end frame.

Html tags change magic

<text class="user-name">Sroot</text>

Data Binding class vuejs

wxml

<view> {{ message }} </view>

wxs

this.setData({ message : "Hello World" })

Class vuejs life cycle

Applets have app, page, component life cycle.

wxs

App //
 App ({ 
  OnLaunch (Options) { 
    // lifecycle callbacks - the listener small program initialization   }, 
  onShow (Options) { 
    // lifecycle callbacks - the listener small startup or cut the front desk   }, 
  onHide () { 
    // lifecycle callbacks - monitor applet cut back  }  })  // page page ({  onLoad: function (Options) {// lifecycle callbacks - monitor page loads. }, onShow: function () {// lifecycle callbacks - page display monitor. }, the onReady: function () {// lifecycle callbacks - listening initial page rendering is complete. }, onHide: function () {// lifecycle callbacks - hidden listening page. }, onUnload: function () {. // lifecycle callbacks - monitor page uninstall }}) // component wording of the new version of the component ({Lifetimes: {the created: function () {// execute when a component instance is newly created.




}, Attached: function () {// executed when the node tree component instance into the page. }, READY: function () {// performed after completion of the component layout view layer. }, Moved: function () {// executed when component instance is moved to another location node tree. }, Detached: function () {// perform when the assembly is removed from the page instance node tree. }}})

Reactjs class components and vuejs 

wxml components

<template name="XXX">
  <view>
    <text> name: {{name}} </text>
  </view>
</template>

wxml

<template is="XXX" data="{{name}}"/>

wxs

Page({
  data: {
    name: "Sroot"
  }
})

 

Image files are not supported relative path reference.

Not allowed

wxml

 

wxss 

.logo-top {
  background: url('img/logo.png');
}

 

 

Cookie does not support the local cache.

Only use Storage, Cookie can not be used to store data. (Cookie biggest advantage is that you can set whether you can modify and set the expiration time)

PS: If you are an independent micro-letter account login applet, can only be used to store login data localstorage micro letter applet API.

 

Only supports basic element selector.

PS: do not support adjacent sibling, child element selectors.

 

Debug pages is too much trouble.

Different from the micro-channel public number page, a page can not be accessed directly from the address bar, only to compile the first page.

Solution: (1) Set the "Add compilation mode" in the micro-channel developer tools.

                   

                   (2) Fill the appropriate parameters.

                    

                    (3) Select the corresponding compilation mode, you can run a page debugging.

                      

PS: You can also set the page by project.config.json file.

{
  ...
    "condition": {
        ...
        "miniprogram": {
            "current": -1,
            "list": [
                {
                    "id": -1, "name": "hello", "pathName": "pages/index/index", "query": "", "scene": null }, { "id": -1, "name": "detail", "pathName": "pages/detail/index", "query": "", "scene": null } ] } } }

 

微信小程序发布需要审核。

小程序应用发布与移动应用商店发布流程相似，需要审核才能发布。

PS：如果是以独立账号登陆（不是微信授权登陆）使用的微信小程序，需要提交审核两次，第二次提交审核才会出现填写提供测试账号。（什么鬼逻辑，第一次不能直接提供吗）