Small program related (1)

applet structure

Rendering Layer: WXML + WXSS (similar to HTML CSS)
Logic Layer: JavaScript
Configuration: JSON

 

======Basic file structure====== pages-
>
　　test->
　　　　test.js
　　　　test.wxml
　　　　test.wxss
　　　　test.json
app.json
app.js
app.wxss
project.config.json

==========Configuration Navigation==============Configure
in the json file under pages, and configure it according to the development documentation

=======Element ===========
<text></text> similar to span tag
<image></image> similar to img absolute path: "/images/01.png"
< view></view> similar to div

=====Responsive length unit rpx========
Adapt elements to different screen widths
No matter what kind of device, the screen width is specified as 750rpx

 

========Navigation component navigator==========
Similar to a tag
attribute
url used to jump to page url="/pages/weekly/weekly"
open-type Can you return after jumping
redirect can not return to
navigate can return to
switchTab Used when there is a tabBar, you can jump to the corresponding page, and the tab also has corresponding feedback (color-changing)
hover-class The style displayed when pressed, followed by the class name directly, the style must be defined after the normal style, otherwise invalid

 

=======tabBar==============
The tab is
in app.json

"list": [
{

"pagePath": "pages/about/about",

"text": "关于",
// displayed text
"iconPath": "images/icons/home1.png",
//iconfont when not selected
"selectedIconPath": "images/icons/home2.png"
//iconfont when selected
},
{

"pagePath": "pages/weekly/weekly",

"text": "Weekly Recommendation",

"iconPath": "images/icons/neirong1.png",
"selectedIconPath": "images/icons/neirong2.png"

}
],

"color":"#000",
// usual font color
"selectedColor":"#00f"
// color of the font when selected
},

　　

=====Tab unified navigation style =======
In app.json

"window": {
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
}

　　

======Data binding==========
Similar to vue, assign values ​​in the corresponding js data, and then {{msg}}
can also be called with the expression {{(score>= 60?"Pass":"Fail")}}

===== applet operating environment and basic architecture ====
operating environment (hosting environment) can call some of the interface
view layer (rendering layer) and logic
layer of the machine, their own description language
, their own running process
(about page and weekly Each page has a built-in internal state variable of webviewId to record that they are each rendered in the webview process.
The communication between the two is based on data binding and event mechanism (the logic layer processes the data and sends it to the view) Layer, the view layer renders the corresponding part according to the content sent

=======wx:if============
Similar to v-show, when true, it displays
<text wx:if="{{list.isHighlyRecommended}}">Highly recommended </text>

=======wx:for==========
is similar to v-for, but he uses item and the subscript is index

<view class="list clearfix" wx:for="{{list}}">

　　<image class="list-image" src="{{item.imagePath}}"></image>

　　<view class="list-details">

　　　　<text>第{{index+1}}周:{{item.name}}</text>

　　　　<text>{{item.comment}}</text>

</view>

</view>

　　

 

========swiper carousel ===========The
default height is 150rpx
, various content
indicator-dots can be placed in the swiper-item, display control points
--previous page and next page All exposed a little --
previous-margin="50rpx"
next-margin="50rpx"

<swiper style="background:#eee" indicator-dots='{{true}}'>

    <swiper-item>123</swiper-item>

    <swiper-item>456</swiper-item>

    <swiper-item>789</swiper-item>

</swiper>