1.View的使用：
1）view创建
在wxml中创建
横的view：
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item" style="background:#45a1cf" >1</view>
<view class="flex-item" style="background:red">2</view>
<view class="flex-item" style="background:blue">3</view>
</view>
</view>
竖的view
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="height: 300px;flex-direction:column;">
<view class="flex-item" style="background:#45a1cf">1</view>
<view class="flex-item" style="background:red">2</view>
<view class="flex-item" style="background:blue">3</view>
</view>
</view>
在wxss里创建样式：
/* pages/testPage/testpage.wxss */
.flex-wrp{
height: 100px;
display:flex;
}
.flex-item{
width: 100px;
height: 100px;
}
对view添加长按效果：
<view class="flex-item" /**style="background:#3345a1cf"**/ hover="true" hover-class="view_press" hover-start-time="1000" hover-stay-time="500">1</view>
.view_press{
background: black;
opacity: 1;//透明度
}
注意的是，如果添加style="background，没有发现会有效果
目前支持 hover-class 属性的组件有三个：view、button、navigator
循环显示块元素：
<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/>
</block>
</view>
js文件：
Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
]
}
})
2）image添加图片
<image src ='/resource/image/loadfail_withnobg.png' class='img' mode="widthFix"></image>
3）自定义view使用：
创建component文件夹放组件，创建我的nicelist组件：
nicelist.json需要指明为组件：
{
"component": true
}wxml中写该组件布局：
<view class='list-group'>
<view class='list-left'>
<image src ='/resource/image/loadfail_withnobg.png' class='img' mode="widthFix"></image>
</view>
<view class='list-right'>
<view class='title'>{{title}}</view>
</view>
</view>
wxss指明样式：
/* component/nicelist/nicelist.wxss */
:host{
display: block;
border-bottom: 1px solid #e0e0e0;
}
.list-group{
display: flex;
padding:5px 10px;
}
.img{
width:100px;
height: 70px;
}
.list-left{
flex:0 0 100px;
}
.list-right{
flex:1;
}
.title{
font-size:16px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
在page的wxml引用：
<View id='nicelistView' wx:for="{{newsArray}}" wx:for-item="newsItem">
<nicelist title="{{newsItem.title}}">
</nicelist>
</View>修改view的状态，使之动态改变：
wxml：
输入框文字大于0，inputActive激活样式，等于0为inoutInActive状态，只需要动态修改inputTextLength就可以了
<input class="{{inputTextLength>0?'inputActive':'inoutInActive'}}" placeholder="输入搜索的内容" placeholder-style="color: #666666" bindinput='onBindinput' focus='true' confirm-type="搜索" />
wxss:
.inoutInActive {
border: 2px solid #666;
background: #ededed;
align-items: center;
width: 80%;
padding-left: 10px;
padding-top: 5px;
border-radius: 20px;
padding-bottom: 5px;
}
.inputActive{
border: 2px solid #45a1cf;
background: #ededed;
align-items: center;
width: 80%;
padding-left: 10px;
padding-top: 5px;
border-radius: 20px;
padding-bottom: 5px;
}
4）设置view的宽高大小一样：
.medicalObject {
display: inline-flex;
justify-content: center;
width: 18%;
height: 0px;
padding-top: 18%;//这里使与width一样的比例，那么高就与框一样
//但是内容区域很难居中了
margin: 1%;//如果说填充屏幕，这个margin需要精确计算
}
可以通过下面这个，通过设置为取宽度的百分比：
.medicalObject {
display: inline-flex;
justify-content: center;
width: 18vw;
height: 18vw;
margin: 1%;
}5）view的隐藏与可见：
display：none可以使不显示，物理位置也移除
visibility:hidden 使不可见，物理位置保持
display有多种展示方式，可能的值参考：http://www.w3school.com.cn/cssref/pr_class_display.asp2.请求
定义一个请求方法：
function req() {
wx.request({
url: 'url。。。',
method:'get',
header: {
'content-type': 'application/json'
},
success: function (e) {
//var data = e.data;
//这里假如数据返回的是{error: 0, msg: "", data: [{id: "S27", name: "中学"}]}
//那么可以直接通过json对象名称拿到数据，比如e.data.data[0].name，
//打印结果为：success:中学
console.log("success:" + e.data.data[0].name);
},
fail: function (e) {
var error = e.fail;
console.log("fail:" + error);
}
})
}
在页面可见时调用：
onShow:function(e){
req()
},
网络返回后刷新界面数据
js就是mvmm方式界面跟数据绑定的，接口回调后更新数据就可以了
data: {
newsArray: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
var url = 'http://news-at.zhihu.com/api/2/news/latest';
netUtil.doGet(url).then(function(data) {
console.log('success:' + JSON.stringify(data));
}).then(function(reject) {
console.log('reject:' + data);
}).catch(function() {
console.log('catch exception');
that.setData({
'newsArray' : [{
title: 1
},
{
title: 2
},
{
title: 3
}
]
});
});
},3.页面
初始化页面，按照顺序，第一个就是启动页面，比如：
"pages":[
"pages/index/index",//按照顺序来。这个是初始化页面
"pages/logs/logs"
],
页面中自定义方法：
data: {
motto: '欢迎您',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
....
gotoNewsList: function () {
wx.reLaunch({
url: '../newslist/newslist'//页面跳转到newslist/newslist
})
},
调用
onLoad: function () {
this.gotoNewsList()
}
4.模块化
比如在utils下面创建NetUtil.js类
function doGet (urlStr){
return new Promise(function (resolve,reject){
wx.request({
url: urlStr,
method: 'GET',
header: {
'Content-Type': 'application/json'
},
success: function (res) {
if (res.statusCode==200){
resolve(res.data)
}else{
reject('request error,code' + res.statusCode)
}
},
fail: function (err) {
reject(err)
}
})
});
}
//通过exports可以使方法外部可以引用
module.exports={
doGet : doGet
}
//通过Promise可以更优雅的实现异步回调
使用方式为：
function asyncFunc1(){
return new Promise(function (asyncFunc2, asyncFunc3,...) {//这里传入多个异步回调方法
//...
})
}
调用时监听：
asyncFunc1()
.then(asyncFunc2)
.then(asyncFunc3)
.then(asyncFunc4)
.then(asyncFunc5);
比如上面的doGet方法，在page中使用：
var netUtil = require('../../utils/NetUtil.js');
Page({
onLoad: function (options) {
var url = 'http://news-at.zhihu.com/api/2/news/latest'
netUtil.doGet(url).then(function (data) {
console.log('success:' + JSON.stringify(data));//不加stringify打印出来是Object
}).then(function (reject) {
console.log('reject:' + data);
}).catch(function(){
console.log('catch exception');
});
}
})
5.布局
flex布局,可以参考学习：https://www.runoob.com/w3cnote/flex-grammar.html
1.flex-direction属性决定主轴的方向：
row:行排列，从左到右
column :列排列，从上到下
如果需要设置水平居中，flex-direction需要设置为row，如果需要设置为竖直居中，需要flex-direction需要设置为column2. flex-wrap是否换行：
flex-wrap: nowrap | wrap | wrap-reverse;3. justify-content：项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;4.align-items：项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;宽度设置：
white-space: nowrap：规定段落中的文本不进行换行
auto： 默认值。浏览器可计算出实际的宽度。
length： 使用 px、cm 等单位定义宽度。
%： 定义基于包含块（父元素）宽度的百分比宽度。
inherit： 规定应该从父元素继承 width 属性的值。对于图片icon等，如何使图标内容居中：
.searchIcon {
margin-left: 10px;
display: inline-flex;//通过设置inline-flex
flex-direction: column;
justify-content: center;
}
2476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
