小程序发布流程、小程序进度条组件、修改data里的局部数据、小程序api位置
发布发布流程的问题
[*]方式一
1. 打开图片进行本地预览
2. 输入文字 & 选择相应的信息
3. 点击发布按钮
3.1 将本地图片上传到 腾讯云对象存储中COS（oss），并将COS中的图片地址返回。
3.2 将COS中的图片URL和文字等信息一起提交到后台。
BUG：
在3.2步骤时可能拿不到COS中的图片。function onClickSubmit(){
// 耗时1分钟，不会阻塞。
wx.request({
url:"...",
success:function(res){
console.log(res)
}
})
console.log(123);
}
[*]方式二（推荐）
1. 打开图片进行本地预览
2. 将本地图片上传到 腾讯云对象存储中COS
3. 输入文字 & 选择相应的信息
4. 发布：
必须上传完毕之后，才允许点击发布按钮。
组件：进度条
修改data里的局部数据
<view>-----案例------</view>
<view>点击按钮完成，将图片1的进度条更新为80%</view>
<view wx:for="{{imageList}}">
<view>{{item.title}}</view>
<progress percent="{{item.percent}}"></progress>
</view>
<button bindtap="changePercent" >点击</button>data: {
percent1:20,
percent2:50,
imageList:[
{id:1,title:"图片1",percent:20},
{ id: 1, title: "图片2", percent: 30 },
{ id: 1, title: "图片3", percent: 60 },
]
},
changePercent:function(){
// 方式1：错误
/*
this.setData({
imageList.person: 80
});
*/
// 方式2：可以，由于需要全部修改，所以性能差。
/*
var dataList = this.data.imageList;
dataList.percent = 80;
this.setData({
imageList: dataList
});
*/
// 方式3：推荐
var num = 2;
this.setData({
["imageList.percent"]:80,
["imageList[" + num + "].percent"]: 90,
["imageList.title"]:"突突突突突"
})
},小程序内的闭包函数
var dataList = ["alex", "changxin", "cck"]
for (var i in dataList) {
// （）() 第一个括号里放函数，第二个括号里是函数的参数，data就是外面的参数
(function(data){
wx.request({
url: 'xxxxx',
success: function (res) {
console.log(data);
}
})
})(dataList)
}小程序api位置设置
在小程序中很多地方涉及到需要用到api，我们可以吧api统一在一个config文件夹里，该文件夹里新建一个api.js文件，专门放api路由
api.js
var rootURL = 'http://127.0.0.1:8000/api/'
// 声明可以暴露给外界的变量或者函数
module.exports = {
indexURL:rootURL+'news/',
}在外界使用
var AAA = require('../config/api.js')
AAA.indexURL首页瀑布流展示
[*]方式一：
wxml
<view class='container'>
<view >
<image src="https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236" mode="widthFix" ></image>
<image src="https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236" mode="widthFix" ></image>
</view>
<view >
<image src="https://hbimg.huabanimg.com/1143ded46f1808fd460de68bb81d1513d7578d88543aa-cvwFGk_fw236" mode="widthFix" ></image>
<image src="https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236" mode="widthFix" ></image>
</view>
</view>css
.container{
display: flex;
flex-direction: row;
}
.container .item{
width: 50%;
overflow: hidden;
}
.container .item image{
width: 100%;
}
[*]方式二(推荐）：
wxml
<view >
<view >
<image src="https://hbimg.huabanimg.com/1143ded46f1808fd460de68bb81d1513d7578d88543aa-cvwFGk_fw236" mode="widthFix" ></image>
</view>
<view >
<image src="https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236" mode="widthFix" ></image>
</view>
</view>css
.container
{
/* 把页面分成两列 */
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
-moz-column-gap:20rpx; /* Firefox */
-webkit-column-gap:20rpx; /* Safari and Chrome */
column-gap:20rpx;
}
.container .item{
break-inside: avoid-column;
-webkit-column-break-inside: avoid; /* Safari and Chrome */
}
来源:https://www.cnblogs.com/suncolor/p/17025474.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]