小程序模板网

微信小程序动态的加载数据,动态设置导航条,用ES6Promise.all批量上传文件 ..

发布时间:2018-04-17 10:16 所属栏目:小程序开发教程

一:动态设置导航条

分享者:HaiJing1995,来自原文地址 
我们知道微信小程序中设置导航条可以直接在json文件中设置 "navigationBarTitleText" = "String" 就可以了 
但是我们有时可能需要根据不同的情况动态设置导航条。

微信小程序给我们提供了一个方法

 

				
  1. setNavigationBarTitle({
  2. title: "string",
  3. success: funciton(res){
  4. ...
  5. }
  6. })

注意这个setNavigationBarTitle方法一定要写在onReady方法中,因为这是页面才完全渲染完成。通常在onLoad中我们是不能对UI进行操作的。

setNavigationBarTitle方法中的title如果我们像这样设置静态字符串的话是起不到动态设置导航条的作用 的。  我们可以从onLoad中获取到一个动态变量,那如何将这个变量从onLoad中传递给onReady方法呢?  我们可以在onLoad中通过this.setData({key: value})将这个变量传递给data,在onReady中再通过this.data.key获得这个变量。

 

二:动态加载数据

分享者:冉然,来自原文地址  1、首先要写在js里定义一个全局变量

 

				
  1. data: {
  2. datalist: []
  3. },

2、请求数据加载,获得整个数组信息

 

				
  1. wx.request({
  2. url: httpUrl,
  3. data: {},
  4. success: function (res) {
  5. that.setData({
  6. datalist: res.data.courses
  7. })
  8. },

3、在.wxml中调用  数组的调用用:wx:for="{{datalist}}"  数组中的单个变量调用用:{{item.courseTitle}}  数组中有域名的单个变量的调用用:https://360fast-edu.com{{item.pictureUrl}}

 

三:用ES6Promise.all批量上传文件

分享者:马小云,来自原文地址  客户端

 

				
  1. Page({
  2. onLoad: function() {
  3. wx.chooseImage({
  4. count: 9,
  5. success: function({ tempFilePaths }) {
  6. var promise = Promise.all(tempFilePaths.map((tempFilePath, index) => {
  7. return new Promise(function(resolve, reject) {
  8. wx.uploadFile({
  9. url: 'https://www.mengmeitong.com/upload',
  10. filePath: tempFilePath,
  11. name: 'photo',
  12. formData: {
  13. filename: 'foo-' + index,
  14. index: index
  15. },
  16. success: function(res) {
  17. resolve(res.data);
  18. },
  19. fail: function(err) {
  20. reject(new Error('failed to upload file'));
  21. }
  22. });
  23. });
  24. }));
  25. promise.then(function(results) {
  26. console.log(results);
  27. }).catch(function(err) {
  28. console.log(err);
  29. });
  30. }
  31. });
  32. }
  33. });

服务端

 

				
  1. <?php
  2. use IlluminateHttpRequest;
  3. Route::post('/upload', function (Request $request) {
  4. if ($request->photo->isValid()) {
  5. $request->photo->storeAs('images/foo/bar/baz', $request->filename . '.' . $request->photo->extension());
  6. return ['success' => true, 'index' => $request->index];
  7. }
  8. });


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23532.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询