小程序发布流程、小程序进度条组件、修改data里的局部数据、小程序api位置

用户雾里看花

发布

发布流程的问题

• 方式一
  1. 1. 打开图片进行本地预览
  2. 2. 输入文字 & 选择相应的信息
  3. 3. 点击发布按钮
  4.         3.1 将本地图片上传到 腾讯云对象存储中COS（oss），并将COS中的图片地址返回。
  5.         3.2 将COS中的图片URL和文字等信息一起提交到后台。
  6. BUG：
  7.         在3.2步骤时可能拿不到COS中的图片。

  复制代码
  1. function onClickSubmit(){
  2.     // 耗时1分钟，不会阻塞。
  3.     wx.request({
  4.         url:"...",
  5.         success:function(res){
  6.             console.log(res)
  7.         }
  8.     })
  9.     console.log(123);
  10. }

  复制代码
• 方式二（推荐）
  1. 1. 打开图片进行本地预览
  2. 2. 将本地图片上传到 腾讯云对象存储中COS
  3. 3. 输入文字 & 选择相应的信息
  4. 4. 发布：
  5.         必须上传完毕之后，才允许点击发布按钮。

  复制代码

组件：进度条

1. [/code][size=4]修改data里的局部数据[/size]
3. [code]<view>-----案例------</view>
4. <view>点击按钮完成，将图片1的进度条更新为80%</view>
5. <view wx:for="{{imageList}}">
6.   <view>{{item.title}}</view>
7.   <progress percent="{{item.percent}}"  ></progress>
8. </view>
10. <button bindtap="changePercent" >点击</button>

复制代码

1.   data: {
2.     percent1:20,
3.     percent2:50,
4.     imageList:[
5.       {id:1,title:"图片1",percent:20},
6.       { id: 1, title: "图片2", percent: 30 },
7.       { id: 1, title: "图片3", percent: 60 },
8.     ]
9.   },
10.   changePercent:function(){
11.     // 方式1：错误
12.     /*
13.     this.setData({
14.       imageList[0].person: 80
15.     });
16.     */
17.    
18.     // 方式2：可以，由于需要全部修改，所以性能差。
19.     /*
20.     var dataList = this.data.imageList;
21.     dataList[0].percent = 80;
22.     this.setData({
23.       imageList: dataList
24.     });
25.     */
26.    
27.     // 方式3：推荐
28.     var num = 2;
29.     this.setData({
30.       ["imageList[0].percent"]:80,
31.       ["imageList[" + num + "].percent"]: 90,
32.       ["imageList[1].title"]:"突突突突突"
33.     })
35.   },

复制代码

小程序内的闭包函数

1. var dataList = ["alex", "changxin", "cck"]
2. for (var i in dataList) {
3.   // （）() 第一个括号里放函数，第二个括号里是函数的参数，data就是外面的参数
4.   (function(data){
5.     wx.request({
6.       url: 'xxxxx',
7.       success: function (res) {
8.         console.log(data);
9.       }
10.     })
11.   })(dataList[i])
12. }

复制代码

小程序api位置设置

在小程序中很多地方涉及到需要用到api，我们可以吧api统一在一个config文件夹里，该文件夹里新建一个api.js文件，专门放api路由
api.js

1. var rootURL = 'http://127.0.0.1:8000/api/'
3. // 声明可以暴露给外界的变量或者函数
4. module.exports = {
5.   indexURL:rootURL+'news/',
6. }

复制代码

在外界使用

1. var AAA = require('../config/api.js')
3. AAA.indexURL

复制代码

首页瀑布流展示

• 方式一：
  

wxml

1. <view class='container'>
2.   <view >
3.     <image src="https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236" mode="widthFix" ></image>
4.     <image src="https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236" mode="widthFix" ></image>
5.   </view>
6.   <view >
7.     <image src="https://hbimg.huabanimg.com/1143ded46f1808fd460de68bb81d1513d7578d88543aa-cvwFGk_fw236" mode="widthFix" ></image>
8.     <image src="https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236" mode="widthFix" ></image>
9.   </view>
10. </view>

复制代码

css

1. .container{
2.   display: flex;
3.   flex-direction: row;
4. }
6. .container .item{
7.   width: 50%;
8.   overflow: hidden;
9. }
11. .container .item image{
12.   width: 100%;
13. }

复制代码

• 方式二(推荐）：
  

wxml

1. <view >
2.   <view >
3.     <image src="https://hbimg.huabanimg.com/1143ded46f1808fd460de68bb81d1513d7578d88543aa-cvwFGk_fw236" mode="widthFix" ></image>
4.   </view>
5.   <view >
6.     <image src="https://hbimg.huabanimg.com/762eee0f99f9fbbc458fb70b0b86d0f8090ba45e7fb75-z1bDC7_fw236" mode="widthFix" ></image>
7.   </view>
8. </view>

复制代码

css

1. .container
2. {
3.   /* 把页面分成两列 */
4.     -moz-column-count:2; /* Firefox */
5.     -webkit-column-count:2; /* Safari and Chrome */
6.     column-count:2;
8.     -moz-column-gap:20rpx; /* Firefox */
9.     -webkit-column-gap:20rpx; /* Safari and Chrome */
10.     column-gap:20rpx;
11. }
13. .container .item{
14.   break-inside: avoid-column;
15.   -webkit-column-break-inside: avoid; /* Safari and Chrome */
16. }

复制代码

来源:https://www.cnblogs.com/suncolor/p/17025474.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！