Basic knowledge of WeChat Mini Program_01

1. Page composition

The main part of a small program consists of three files, which must be placed in the root directory of the project, as follows:

document	required	effect
app.js	yes	applet logic
app.json	yes	Mini Program Public Configuration
app.wxss	no	Mini Program public style sheet

The pages are placed under the pages folder

Each page contains wxml, wxss, json (configuration file), js, as shown in the figure:

2. Perform global configuration in app.json

2.1 Registration page: Generally, after configuring in the json file, the editor will automatically create the corresponding file

Editor download: WeChat developer tool download address and update log | WeChat open document

"pages": [
    "pages/home/home",
    "pages/cate/cate",
    "pages/discont/discont",
    "pages/cart/cart",
    "pages/mine/mine",
    "unpackage/good_detail/good_detail"
  ],

2.2 Style

navigationBarTextStyle	Top navigation text color
navigationBarTitleText	Top navigation text content
navigationBarBackgroundColor	The background color of the upper navigation
backgroundColor	The background color of the page, which can only be seen after pulling down to refresh

 "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "商城项目",
    "navigationBarBackgroundColor": "#1296db",
    "backgroundColor": "#F8F8F8"
  },

2.3 Bottom Navigation Bar

 Configuration:

"tabBar": {
    "selectedColor": "#1296db", // 选择当前项的文字颜色
    "color": "#656565", // 默认的文字颜色
    "list": [ // 数组
      {
        "pagePath": "pages/home/home",
        "text": "主页",
        "iconPath": "static/tabbar_icon/home.png", // 图标路径
        "selectedIconPath": "static/tabbar_icon/home_selected.png" // 被选中后的图标
      },
      ...
    ]
  },

3. Other

~ Parent-child component passing value: name="{ {name}}", only when the onLoad() page is refreshed, the parent element will re-pass the value, even if the parent element obtains the latest store data, but the page will not be refreshed and will not be passed given from the element

~Get pages: getCurrentPages() ; const perpage = pages[pages.length - 1];

~Method to reload the page: page.onLoad()

~Carousel-swiper:

Autoplay	autoplay=“ true”    ( false )
point dot	Indicator-dot=“true” ( false )
cohesive carousel	circular=“true”   ( false )

~image-image: 

src	Path path /public/url
mode	Fill elements: scaleToFill
mode	Long side display: aspectFit
mode	Short side display: aspectFill

~Button 

plain	Whether it is hollowed out or not, the background is invalid
bindtap	Bind the click event
catchtap	stop bubbling

~local storage:

wx.setStorageSync(‘key’,data)	storage
wx.getStorageSync(‘key’)	Obtain

~template syntax

{ {   }}	Use double curly braces to display values
Wx:for = “{ {data}}”	Cycle rendering is also
Loop rendering	Displayed in item, item.name

~The method of modifying data: this.setData({'data.key' : value})

~Enable the pull-down refresh function: app.json.window.enablePullDownRefresh : true

---

custom components

`Set "usingComponent ":{"name":"path"} in the json file in the page that needs to use the component

`The internal data of the component is stored in: properties: {}, which can be passed through the custom component in the parent component

`Component internal methods are defined in methods

`Component style issues: it is best to use class selectors, so that there is style separation

Store Mobx uses:

introduce	npm install --save mobx-miniprogram mobx-miniprogram-bindings
import	Import { createStoreBIndings} from “mobx-minprogram-bindings”
use	this.StoreBIndings = createStoreBIndings({ store,fields: [’string’  ], actions: [’string’]})

in store.js	import {
	observable,
	action
	} from 'mobx-miniprogram'

1. text-overflow: ellipsis;//Display the ellipsis to represent the trimmed text
2. white-space: nowrap; //The text will not wrap, the text will continue on the same line until a tag is encountered
3. overflow: hidden;//The overflow part is hidden