用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:34

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

一:动态设置导航条

分享者: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. });
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏