1、 app.json: 全局配置
app.wxss： 全局样式
2、 home.json: 页面配置
3、 数据绑定：
<text data-id="{
{ title }} ">{
{ title }} </text>
<!-- checkbox 必须要这么写 不能check="true" -->
<checkbox checked="{
{true}} "></checkbox>
4. 页面运算：
运算：{
{ num1+ num2}}
<!-- 注意 {
{ 和 " 直接不能有空格，否则会单做 字符串处理，不会运算-->
<checkbox checked="{
{ num1 > 320}}"></checkbox>
5. <!-- wx:key 用于提高性能 -->
<view wx:for="{
{listArr}}" wx:for-item="item1" wx:for-index="index1" wx:key="index1">
{
{index1 }} -- {
{item1}}
</view>
6. rpx 可以根据屏幕的宽度进行自适应， rpx就是一个比例单位
规定屏幕宽为750rpx
实际开发中， 通过api 获取的是屏幕高度px, 高度可以px,
比如 UI-scrollView 必须设置px ,通过屏幕宽、高计算
var windowHeight = wx.getSystemInfoSync().windowHeight
var windowWidth = wx.getSystemInfoSync().windowWidth
.windowHeightWidthClass {
height: 100vh;
width: 100vw;
/* height: calc(100vh - 42px);
tab-bar ： 42px 小程序导航栏高度
*/
}
CSS3中的 `vh` 和 `vw` 是相对于屏幕大小的单位，即：
vh => view height
vw => view width
7. 内联样式
通过属性值控制样式
<view style="background-color:{
{ myColor }} ">
style
</view>
<view class="{
{ showcolor }} ">
class
</view>
8. navigator 使用
9. 自定义控件：
1. 新建自定义控件,
properties: {
cDate:{
value:"组件默认值",
type:String
}
}
<view class="my_header">
<text>组件默认值prop配置：{
{cDate}} </text>
<view>
<!-- 这是 标签数据 -->
<slot></slot>
</view>
</view>
2. 组件使用
在对应page中引入组件默认值： home.json
{
"usingComponents": {
"MyHeader":"../custumView/MyHeader"
},
"navigationBarBackgroundColor":"#BBFFCC",
"navigationBarTitleText":"第一个页面"
}
home.wxml使用：
<!-- 引用组件 xiaoming是slot -->
<MyHeader>xiaoming</MyHeader>
10. 权重设置
11. 水平 滚动条
12.轮播图
13. gridView 效果，相对布局
home.wxml
<!--pages/home/home.wxml-->
<view class="homeRootView">
<!-- 3. 数据绑定 -->
<text data-id="{
{ title }} ">{
{ title }} </text>
<!-- checkbox 必须要这么写 不能check="true" -->
<checkbox checked="{
{true}} "></checkbox>
<!-- 4. 页面运算 -->
运算：{
{ num1+ num2}}
<!-- 注意 {
{ 和 " 直接不能有空格，否则会单做 字符串处理，不会运算-->
<checkbox checked="{
{ num1 > 320}}"></checkbox>
<!-- wx:key 用于提高性能 -->
<!-- <view wx:for="{
{listArr}}" wx:for-item="item1" wx:for-index="index1" wx:key="index1">
{
{index1 }} -- {
{item1}}
</view> -->
<!-- 7. 通过属性值控制样式 -->
<view style="background-color:{
{ myColor }} ">
style
</view>
<view class="{
{ showcolor }} ">
class
</view>
<!-- navigate: 默认跳转
redirect: 关闭当前页面
-->
<navigator url="../index/index" open-type="navigate">标签</navigator>
<!-- 8. 跳转 tabbar页面 -->
<navigator url="../logs/logs" open-type="switchTab">切换tabbar页面</navigator>
<!-- 9.引用组件 -->
<MyHeader>xiaoming</MyHeader>
<!-- 10. 权重设置 -->
<view class="mytitle">
<view class="mytitle_child1">
<text>A</text>
</view>
<view class="mytitle_child2"></view>
<view class="mytitle_child3"></view>
</view>
<!--11. 水平 滚动条 -->
<view>
<scroll-view class="nav" scroll-x>
<!-- <view wx:for="{
{listArr}}" wx:for-item="item1" wx:for-index="index1" wx:key="index1" class="nav_item active">
{
{ item1 }}
</view> -->
<!-- 1. 设置导航栏
2. 写样式
3. 处理点击事件
-->
<view bindtap="activeNav" data-index="{
{index1}}" class="nav_item {
{index1==currentIndexNav?'active':'' }} " wx:for="{
{listArr}}" wx:for-item="item1" wx:for-index="index1" wx:key="index1">
{
{ item1 }}
</view>
</scroll-view>
</view>
<!-- 12.轮播图-->
<view class="slides">
<swiper autoplay indicator-dots circular >
<swiper-item wx:for="{
{ swiperLists}}" wx:key="index">
<navigator>
<view>
<image mode="widthFix" src="{
{ item.coverImg }}"></image>
</view>
</navigator>
</swiper-item>
</swiper>
</view>
<!--13. gridView 效果-->
<view class="video_wrap">
<navigator url="../detail/detail?id={
{item.id }} " class="video_item" wx:for="{
{ swiperLists}}" wx:key="index">
<view class="video_img" >
<image src="{
{item.coverImg}}" ></image>
<!-- 播放量-->
<view class="video_info">
<text style="background-color: #ff9">我是小明大姐夫110</text>
<text>120</text>
</view>
</view>
</navigator>
</view>
</view>home.json
{
"usingComponents": {
"MyHeader":"../custumView/MyHeader"
},
"navigationBarBackgroundColor":"#BBFFCC",
"navigationBarTitleText":"第一个页面"
} home.js
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
title:"hello",
num1:100,
num2:300,
listArr:["苹果","香蕉","雪梨","葡萄","哈密瓜","橙子"],
myColor:"#ff0000",
showcolor: "showColor",
// 被点击菜单索引
currentIndexNav:0,
swiperLists:[]
},
activeNav(e){
console.info(e)
this.setData({
currentIndexNav:e.target.dataset.index
})
},
getSwiperList(){
let that = this;
wx.request({
url: 'http://api.m.mtime.cn/PageSubArea/TrailerList.api',
success(data){
if(data.statusCode==200){
that.setData({
swiperLists: data.data.trailers.slice(0,4)
});
}
console.info(data);
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getSwiperList();
wx.getSystemInfoSync().getScree
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})home.wxss
/* pages/home/home.wxss */
.showColor{
background-color: #000;
}
/* 权重设置 */
.mytitle{
display: flex;
width: 100%;
height: 50px;
}
.mytitle_child1{
flex: 7;
display: flex;
background-color: #fff;
justify-content: center;
align-items: center;
}
.mytitle_child2{
flex: 1;
background-color: #bfa;
}
.mytitle_child3{
flex: 1;
}
.nav{
white-space: nowrap;
padding: 5rpx 0;
}
.nav_item{
padding: 20rpx 45rpx;
font-size: 30rpx;
display: inline-block;
color: #666;
}
.nav_item.active{
border-bottom: 5rpx solid #de688b;
}
.slides swiper{
height: 220rpx;
}
/* gridview案例 */
.video_wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 5rpx;
}
.video_item{
width: 49.7%;
margin-bottom: 20rpx;
}
/* 评价，使用相对布局 */
.video_img{
position: relative;
}
.video_item .video_info{
position: absolute;
left: 0rpx;
bottom: 0rpx;
width: 100%;
display: flex;
justify-content: space-around;
}
.video_img image{
border-radius: 15rpx;
width: 100%;
}
.video_info text{
width: 50%;
font-size: 28rpx;
display: -webkit-box;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}自定义控件代码如下：
MyHeader.wxml
<!--pages/custumView/MyHeader.wxml-->
<view class="my_header">
<text>组件默认值prop配置：{
{cDate}} </text>
<view>
<!-- 这是 标签数据 -->
<slot></slot>
</view>
</view>
MyHeader.js
// pages/custumView/MyHeader.js
Component({
/**
* 组件的属性列表
*/
properties: {
cDate:{
value:"组件默认值",
type:String
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
MyHeader.json
{
"component": true,
"usingComponents": {}
}MyHeader.wxss
/* pages/custumView/MyHeader.wxss */
.my_header{
background-color: #00f;
}
上拉加载、下拉刷新控件：
上拉加载:
onReachBottom:function(event){}
下拉刷新配置：.json
"enablePullDownRefresh":true
onPullDownRefresh:function(event){}) 下拉刷新触发含糊
logs.wxml
<!--logs.wxml-->
<view class="rootLog">
<view wx:for="{
{listArr}}" wx:key="key">
{
{item}}
</view>
</view>
logs.js
//logs.js
const util = require('../../utils/util.js')
Page({
data: {
listArr:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
},
onLoad: function () {
console.info(this.data.listArr.length);
},
// 上拉刷新回调
onReachBottom:function(event){
console.info("页面滑动到底部");
var newArr= [100,101,102,11,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];
this.setData({
listArr: this.data.listArr.concat(newArr)
})
},
onPullDownRefresh:function(event){
console.info("下拉刷新");
let newArr=[];
for(var i=0;i<100;i++){
newArr[i]=i+100;
}
this.setData({
listArr:newArr,
});
wx.stopPullDownRefresh();
}
})
logs.json
{
"navigationBarTitleText": "查看启动日志",
"usingComponents": {},
"enablePullDownRefresh":true
}