微信小程序-笔记

Posted 2020-10-15 魏文塔

小程序动态引入图片：

var index = this //当前赋值
wx.request({
url: ‘http://192.168.2.107:8080/carserver/appuser/banners.do‘, //仅为示例，并非真实的接口地址
data: {
x: ‘‘,
y: ‘‘
},
method:"post",
header: {
‘content-type‘: ‘application/json‘
},
success: function (res) { //打印后发现是数组，for循环
var arr = [] //定义一个数组
for (var i = 0; i < res.data.list.length;i++ ){
var ourl = res.data.list[i].url
arr[i] = "http://192.168.2.107:8080/carserver/appdownload/download/" + ourl //赋值数组
// console.log(arr[i])
}
index.setData({ //把数组添加到data里面
imgUrls: arr
})
}
})

子页面获取全局的app.js 文件

var app = getAPP();

点击跳转页面：

1，
<navigator url="../../pages/logs/logs">
<view>点击我跳转到下一个页面</view>
</navigator>

首先对text 设置监听事件
<view bindtap="toast" class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
然后对该text 设置事件跳转。
//事件处理函数 点击text
toast: function() {
wx.navigateTo({
url: ‘../blueberry/blueberry‘
})
},

2，
wx.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

微信小程序请浮动：

1，.clearfix {
overflow: auto;
_height: 1%;
}

2，.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

导航跳转 // 类似a标签

<navigator url=""></navigator>

边框：

border-left-width:;

border-left-style:;

border-left-color:;

左右布局：

display：flex;

justify-content:space-between; //显示左右

align-items:center; //行高居中

居中布局：

display:flex; //弹性盒子模型

flex-wrap:wrap; //换行

flex-direction: row； //横向排序

justify-content:center; //居中显示

两端对齐中间居中：

display: flex;
justify-content:space-between;

 

跳转登录页： wx.redirectTo

横向滑动： scroll-view_H

.scroll-view_H{
white-space: nowrap;
}
.scroll-view-item_H{
display: inline-block;
width: 100%;
height: 300rpx;
}

 

计时器：

var that = this;

setTimeout(function(){

that.setData({})

},3000)

滑块：
<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
<view id="green" class="scroll-view-item_H bc_green">
<view class="div1"></view>
<view class="div2"></view>
</view>
</scroll-view>

文本溢出隐藏：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

后台交互 数组

data:{
mess:[‘1‘] //数组
}

var that = this;
wx.onSocketMessage(function(res){

var arr = that.data.mess //前面的数组
arr.push(res.data)

that.setData({

mess:arr
})

})

三元运算：

<view hidden="{{ hide ==1 ? ‘active‘:‘‘ }}"></view>