小程序相关(一)

小程序结构

渲染层: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>

猜你喜欢