小程序相关，一

小程序结构

渲染层: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  indicator-dots='{{true}}'>

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

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

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

</swiper>