小程序相關(一)

小程序結構

渲染層:WXML + WXSS(相似於HTML CSS)
邏輯層:JavaScript
配置:JSON

 

======最基本的文件結構======
pages->
　　test->
　　　　test.js
　　　　test.wxml
　　　　test.wxss
　　　　test.json
app.json
app.js
app.wxss
project.config.json

==========配置導航===============
在pages下的json文件裏配置,根據開發文檔來配置

=======元素===========
<text></text> 相似span標籤
<image></image> 相似img 絕對路徑:"/images/01.png"
<view></view> 相似div

=====響應式長度單位rpx========
讓元素適配不一樣的屏幕寬度
不管哪一種設備,都規定屏幕寬度爲750rpx

 

========導航組件navigator==========
相似a標籤
屬性
url 用來跳轉page url="/pages/weekly/weekly"
open-type 跳轉後可否返回
redirect 不能返回
navigate 能返回
switchTab 有tabBar時使用,能夠跳轉對應頁,tab也有相應的反饋(變色)
hover-class 按住時顯示的樣式,後面直接加class名稱,樣式必須在正常樣式以後定義,不然失效

 

=======tabBar=============
選項卡
在app.json裏

"list": [
{

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

"text": "關於",
//顯示的文字
"iconPath": "images/icons/home1.png",
//未選中時的iconfont
"selectedIconPath": "images/icons/home2.png"
//選中時的iconfont
},
{

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

"text": "每週推薦",

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

}
],

"color":"#000",
//平時字體的顏色
"selectedColor":"#00f"
//選中時字體的顏色
},

　　

=====選項卡統一導航樣式=======
在app.json裏

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

　　

======數據綁定==========
與vue相似,在對應的js的data裏賦值,而後{{msg}}調用
也能夠用表達式{{(score>=60?"及格":"不及格")}}

=====小程序運行環境與基本架構====
運行環境(宿主環境) 能夠調用本機的一些接口
視圖層(渲染層)和邏輯層
各自描述語言
各自的運行進程
(about頁和weekly頁,都內置了一個webviewId的內部狀態變量,來記錄他們各自是在記好webiew進程之中進行渲染)
二者基於數據綁定和事件機制的通信(邏輯層對數據進行處理後,發送給視圖層,視圖層根據發送的內容對對應的部分渲染

=======wx:if===========
相似v-show,當爲true的時候顯示
<text wx:if="{{list.isHighlyRecommended}}">強烈推薦</text>

=======wx:for==========
相似v-for,可是他用的是item,下標是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輪播===========
默認高度是150rpx
swiper-item裏能放各類內容
indicator-dots 顯示控制點
--前一頁與後一頁都露出一點--
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>