發布
發布流程的問題
-
方式一
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. 發布： 必須上傳完畢之后，才允許點擊發布按鈕，
組件：進度條
<progress percent="{{percent1}}" ></progress>
<progress percent="{{percent2}}" activeColor="#DC143C" ></progress>
修改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[0].person: 80
});
*/
// 方式2：可以，由于需要全部修改，所以性能差，
/*
var dataList = this.data.imageList;
dataList[0].percent = 80;
this.setData({
imageList: dataList
});
*/
// 方式3：推薦
var num = 2;
this.setData({
["imageList[0].percent"]:80,
["imageList[" + num + "].percent"]: 90,
["imageList[1].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[i])
}
小程式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.uj5u.com/houduan/541420.html
標籤：其他