• 开发微信小程序过程中,在微信开发者工具,七牛云的图片都可以展示出来,但是在真机,七牛云的图片却展示不出来,也没有报404找不或者不能加载图片的问题, 必须保证: 1.图片是用image加载的; ...

    在开发微信小程序过程中,在微信开发者工具上,七牛云的图片都可以展示出来,但是在真机上,七牛云的图片却展示不出来,也没有报404找不到或者不能加载图片的问题,

     

     

    必须保证:

    1.图片是用image加载的;

    2.图片的url里面没有中文;

    3.图片的HTTP应为小写的http以及图片的后缀为小写的.png或者.jpg(建议全部为png)

    4.域名已备案;

    5.图片名称没有空格

    转载于:https://www.cnblogs.com/sxdcgaq8080/p/9988729.html

    展开全文
  • 后来实际开发的时候发现,页面用到图片实在是太多。CDN流量一个月5G根本不够用。但是我看到了数据库一天可以免费访问5万次,我就决定用base64来解决CDN流量不够用的问题。小程序云开发也是可以视频的。有个提示...

    这次是帮朋友写的一个简单的小程序。考虑到成本和页面简单的问题,我就决定用小程序云开发来进行开发。后来实际开发的时候发现,页面用到图片实在是太多。CDN流量一个月5G根本不够用。但是我看到了数据库一天可以免费访问5万次,我就决定用base64来解决CDN流量不够用的问题。小程序云开发也是可以放视频的。有个提示就是我们在操作数据库的时候一定要注意权限的设置,不然就算你是管理员你在本地还是访问不到数据的!!!希望对大家有所帮助。直接上代码

    WXML:

    <view class="headerContainer">
      <view class="headerImage">
        <image src="../../images/header.jpg"></image>
      </view>
      <view class="headerName">
        摄影师:王刀刀
      </view>
      <view class="headerDescrition">
        <text decode="{{true}}">美食&nbsp; · &nbsp;产品&nbsp; · &nbsp;广告&nbsp; · &nbsp;活动&nbsp; ·  &nbsp;航拍&nbsp; · &nbsp;微摄</text>
      </view>
    </view>
    <view class="inforContainer">
      <view class="inforTitle">免费资源</view>
      <view class="inforListContentContainer">
        <view class="inforListContainer" wx:for="{{resource}}" wx:key="key">
          <view class="circleContainer">
            <view class="cicleContent"></view>
          </view>
          <text>{{item}}</text>
        </view>
      </view>
      <view class="inforTitle">联系方式</view>
      <view>
        <text class="phoneNumber">13626245104(微信同手机号)</text>
      </view>
      <view class="inforTitle">项目经历</view>
      <!-- tab栏 -->
      <view class="tabContainer">
        <view wx:for="{{tabTitle}}" data-tabIndex="{{index}}" wx:key="key" bindtap="tabClick">
          <text class="{{tabIndex === index ? 'tabActive':''}}">{{item}}</text>
        </view>
      </view>
      <!-- tab栏对应的内容 -->
      <view wx:for="{{tabTitle}}" wx:for-item="itemTab" wx:key='key'>
        <!-- 图片 -->
        <view class="imgContainer" hidden="{{itemTab === '微视频' ? true : tabIndex !== index ? true : false}}">
          <view class="imgListContainer" wx:for="{{itemTab === '美食摄影'? foodImgArr : itemTab === '产品摄影' ? proImgArr : sceneImgArr}}" wx:key='key'>
            <image src="{{item}}" mode="aspectFill" data-index='{{index}}' bindtap="viewImage"></image>
          </view>
        </view>
        <!-- 微视频 -->
        <!-- <view wx:for="{{videoArr}}" wx:key="key">
          <video id="video_{{index}}" class="videoStyle" src="{{item}}" bindplay="videoPlay"></video>
        </view> -->
      </view>
    </view>

    WXJS:

    //index.js
    const app = getApp()
    Page({
      data: {
        resource: [
          '全画幅单反相机', '大三元镜头组', '预定摄影棚', '微距镜头', '普通闪灯', '联机拍摄', '常用道具', '助理'
        ],
        // '微视频'
        tabTitle: ['美食摄影', '产品摄影', '场景摄影'],
        videoDist: [
          'cloud://wangxing-eepas.7761-wangxing-eepas-1300282240/微视频/乌米粽.MP4',
          'cloud://wangxing-eepas.7761-wangxing-eepas-1300282240/微视频/喜来登香港老饭店.mp4',
          'cloud://wangxing-eepas.7761-wangxing-eepas-1300282240/微视频/建德新安江奇雾.MP4',
          'cloud://wangxing-eepas.7761-wangxing-eepas-1300282240/微视频/蜜瓜.MP4'
        ],
        video_id: '',
        videoArr: [],
        proImgId: [
          '5edf0df2-2b61-4b19-821d-0cd62067ea9f', '34f6ab37-184a-4acc-99e3-f132a12ed0d8', '3e66d75e-3d36-4d00-b307-695c5f6f9a90', 'b6d25571-0167-48c7-b17f-d1ad5d86017a',
          'bd76baca-dd0e-4815-a384-70a4a208e78b', '596734eb-0018-44e3-9491-61252ca3ee07', 'e67ab1f3-f991-471c-9108-0b2cbd130f47', 'c2fb5258-776d-4db7-a26c-5af777c4ab75', '2d632cf1-522e-471b-977d-bd25f29f2814',
          'b3df7c5b-2038-4639-90e2-a2aef1c9c155', 'e69f322a-ba77-49c2-82ac-b6d4d9122403', 'c305d4d4-70a6-4171-b3f9-816e137470f6', 'd75e81cc-7f28-4930-ace4-27db31127668', '0cd82ecc-a679-468b-a5f7-0fe418b876cd',
          'dc7378ca-5b9b-4559-b86d-e254ed5a9212', '049ffdab-2060-4878-a60d-e8bfa181f8bf', 'b650e215-838b-48ef-85ea-145deffec499', '9cda3ce3-4070-464e-8662-867328bf62f3', '9a556f92-8133-4dfa-8960-975e7d1771b5',
          'e4b61e5a-436b-4722-8599-342a25abbea6', '86c01e07-77cb-45f7-9a91-5f0c2c131f63', 'efcee82c-a03d-4014-aab9-35667de1e133', '4184091e-1b56-4c96-8fc6-2e17536b2e17', '4fe446c7-98b9-4d6b-8cdb-47e2ef7cf069',
          '37f78fcc-bda1-4eb8-8658-ce592c4506de', '3557b4a7-3148-4d59-8074-56870814e358', '0f8e533e-be27-4119-be72-025c79175bf1'
        ],
        foodImgId: [
          'd07f4db0-d1c1-4587-aa8c-6e387046e5c6', 'e8ac583c-857f-4880-b905-1cba97444c1b', '633d628c-c465-420e-9219-e06e35e9b38b', '9eadfb94-c593-46ce-beab-f25ed4aaa75c', '5f0787fa-db10-4202-9878-7dcc2545317c',
          '87659922-bf49-456c-aea5-40cab438acda', '381c52fa-de26-43da-83de-649a27f3e944', '0263078c-c8e1-4688-a352-5a08570ccd9d', '4e91c53a-d978-4171-90b1-38d2e2c2b70d','8115131d-6bee-4248-b942-724db65cdf4a',
          '14d2976e-74a3-414e-b294-6984a41082a3', '20027202-eaee-4dbc-8db9-092ba4cc2ab0', '1aa9d907-5d85-442e-b570-4be37165b023', 'dd2c28dd-8ac5-40b6-9ecd-30a41289c350','9218522e-6786-4e85-8fa6-7eb4d61e77a9',
          '290e0638-0a65-4548-be30-ea0c5852f51f', '311216c4-69b5-4ea6-9cdf-41d24a17450d', '6fbf09c2-4864-4066-a0af-3dfff4eea9a6', '77f24bc1-dbde-4569-a3fa-11a7741fc982','854425c8-fc05-451e-b610-e2b19081e927',
          'd99fbdf3-5f91-4b52-962f-8b0e708b4072', 'f6f892ea-988c-4fb8-99ed-e35c15b4f9a9', 'ead195c2-c19d-47ea-8238-24246acb8610', 'b901e96b-d933-4bce-93d0-d4875412135f','2554c62a-30f2-4686-9cbc-d61eb8a8f98b',
          '0a82f6ce-abb7-4246-875a-bf7eb44f797a', '57bbc128-8233-4d4b-ac02-b8a98df72955', '861cf71e-94ab-429e-b7a9-ff71a41e47b0', '2b341370-7ffc-4731-a75b-88e13ceac76f','8fa338f6-27e5-4356-ad9c-60a769439a65',
          '16ff398f-c5ed-40b4-b1b0-83412d7434ee', '3b2b5810-7da4-4e32-8154-f2900c19e9e2', 'ae396e4d-7f3b-4a8c-ab92-445bf47fabe2', '9091408d-9a53-47e4-b2d5-379c0ff9b0c2','96ac1f17-4745-4c2c-8b8a-861d48ec0be3',
          '97dd778a-63c6-4746-82ca-67f14e31d5a7', '69194a57-cfb5-4708-a879-2d838fe8f3d7', '9d022fc8-3e50-4511-8ad9-9cefcc597498', '1563f6ca-ca21-4b86-bd8c-2f5cd602fd2c','d6fa920c-ac5d-4c30-9bbb-54f89451f19c',
          '1e755458-08f3-4940-929f-6d55ac25e686', '7c8c0486-b07d-4837-a6f4-e156a689b30e', '5dfd0b3f-6921-4fb4-8edf-9d9f2c7c17a7', 'e60b80b0-3bb8-4060-9830-a901ad96d712','08a7754f-a592-42e7-b19b-8a0c710fb0b3'
        ],
        sceneImgId: [
          '1b6a8e6e-41a1-4960-84c6-74e25cd8e29c', 'a0a2edf3-ac0f-4ffe-a210-98920393a4f8', '5ccc9a84-ccb5-4804-86d1-accbeb2ca908', '05217f7f-5488-41f8-94c8-c715280c7070', '26190797-60b2-4440-a65d-213c01dfec64',
          '376e1441-a6b9-4a32-837f-dfa599a3f69d', '5dc25b9b-9756-4c7f-b429-f0512e0bfb90', '1afe46c6-700a-4726-ae74-1d6a1e32b600', '160e6bb3-5d0b-4198-8831-11e9ad80030c', '1fbbbfd1-9aaa-4a9b-b145-61e0139379a3',
          '7895262a-53ac-498c-bb6f-cd244a39b317', '3c7c0910-d9c4-4b97-a146-18d15fad0075', '480d1583-85e6-4777-aba9-fdb6d07fa0e2', '7aaa12ab-9c2a-4b87-b147-e46ee62144ba', '64c42cf5-9e20-45f9-88a2-e7e2a4194bcd',
          '745c04f0-dadd-4970-991e-db318751fc28', '49b154f5-a0de-413f-a1bb-43c39fa8ee82', 'feb9da8a-6eed-4f98-873b-6bda33350ddb', '22dc45f8-8c81-43b1-9dda-c6c0dca05668', '76eb3e0f-1630-4904-9713-fb3b505aa84b',
          'f46d719b-7ee4-4da2-a271-1f19a68b4d54', '88333abb-d6b6-4f70-8c97-9e1e0eea5787', 'df733468-f352-481d-8e10-a75f270acd05', 'f94590e7-86a6-47b8-936d-81f2112ce478'
        ],
        proImgArr: [],
        foodImgArr: [],
        sceneImgArr: [],
        tabIndex: 0
      },
      // tab click
      tabClick: function(e) {
        let tabIndex = e.currentTarget.dataset.tabindex;
    
        this.setData({
          tabIndex: tabIndex
        })
      },
      // 加载video数据的函数
      downVideoFun: function() {
        let that = this;
        let videoList = this.data.videoDist;
        let arr = [];
        for (let i in videoList) {
          wx.cloud.downloadFile({
            fileID: videoList[i]
          }).then(res => {
            arr.push(res.tempFilePath);
            that.setData({
              videoArr: arr
            })
          }).catch(error => {
            console.log(error);
          })
        }
      },
      // 多个视频点击播放暂停
      videoPlay: function(e) {
        var id = e.currentTarget.id;
        console.log(id);
        // 上个一视频id
        var prev_id = this.data.video_id;
        // 停止山一个视频播放
        wx.createVideoContext(prev_id).pause();
        this.setData({
          video_id: id
        })
        // 延迟500ms,再播放本视频
        setTimeout(function() {
          wx.createVideoContext(id).play();
        }, 500)
      },
      // 美食图片
      foodImgFun: function() {
        let that = this;
        let foodImgId = that.data.foodImgId;
        let arr = [];
        const db = wx.cloud.database();
        for (let i in foodImgId) {
          db.collection('foodImg').where({
            _id: foodImgId[i]
          }).get().then(res => {
            arr.push(res.data[0].foodImg);
            that.setData({
              foodImgArr: arr
            })
          }).catch(err => {
            console.error(err)
          })
        }
      },
      // 产品图片
      proImgFun: function() {
        let that = this;
        let proImgId = that.data.proImgId;
        let arr = [];
        const db = wx.cloud.database();
        for (let i in proImgId) {
          db.collection('proImg').where({
            _id: proImgId[i]
          }).get({
            success: function(res) {
              arr.push(res.data[0].proImg);
              that.setData({
                proImgArr: arr
              })
            },
            fail: console.error
          })
        }
      },
      // 场景图片
      sceneImgFun: function() {
        let that = this;
        let sceneImgId = that.data.sceneImgId;
        let arr = [];
        const db = wx.cloud.database();
        for (let i in sceneImgId) {
          db.collection('sceneImg').where({
            _id: sceneImgId[i]
          }).get({
            success: function(res) {
              arr.push(res.data[0].sceneImg);
              that.setData({
                sceneImgArr: arr
              })
            },
            fail: console.error
          })
        }
      },
      // 图片预览
      viewImage: function(e) {
        console.log(this.data.tabIndex);
        let index = e.currentTarget.dataset.index;
        if (this.data.tabIndex === 0) {
          console.log("dianl")
          var imgArr = this.data.foodImgArr;
        } else if (this.data.tabIndex === 1) {
          var imgArr = this.data.proImgArr;
        } else {
          var imgArr = this.data.sceneImgArr;
        }
        wx.previewImage({
          current: imgArr[index], //当前图片地址
          urls: imgArr, //所有要预览的图片的地址集合 数组形式
          success: function(res) {},
          fail: function(res) {},
          complete: function(res) {},
        })
      },
      /**
       * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
       */
      onLaunch: function() {
    
      },
      /**
       * 当小程序启动,或从后台进入前台显示,会触发 onShow
       */
      onShow: function(options) {
        this.foodImgFun();
        this.proImgFun();
        this.sceneImgFun();
        // this.downVideoFun();
      },
      /**
       * 当小程序从前台进入后台,会触发 onHide
       */
      onHide: function() {
    
      },
    
      /**
       * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
       */
      onError: function(msg) {
    
      }
    
    })

    WXSS:

    /**index.wxss**/
    
    page {
      background: #f6f6f6;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    
    .headerContainer {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #323232;
      padding: 30rpx 0 60rpx 0;
    }
    
    .headerImage {
      width: 170rpx;
      height: 170rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    
    .headerImage image {
      width: 100%;
      height: 100%;
    }
    
    .headerName {
      font-size: 36rpx;
      color: #fff;
      margin-top: 40rpx;
    }
    
    .headerDescrition {
      color: #fff;
      font-size: 24rpx;
      margin-top: 30rpx;
    }
    
    .inforListContentContainer {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    
    .inforContainer {
      padding: 0 30rpx 60rpx 30rpx;
    }
    
    .inforTitle {
      height: 60rpx;
      line-height: 50rpx;
      font-size: 28rpx;
      color: #383838;
      letter-spacing: 2rpx;
      border-bottom: 2rpx solid #d9d9d9;
      margin-top: 40rpx;
    }
    
    .circleContainer {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background-color: #60ad99;
      position: relative;
      margin-left: 60rpx;
    }
    
    .cicleContent {
      width: 8rpx;
      height: 8rpx;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      left: 6rpx;
      top: 6rpx;
    }
    
    .inforListContainer {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 36rpx;
    }
    
    .inforListContainer text {
      display: block;
      width: 200rpx;
      font-size: 24rpx;
      color: #8e8e8e;
      margin-left: 28rpx;
    }
    
    .phoneNumber {
      display: block;
      font-size: 24rpx;
      color: #8e8e8e;
      margin-left: 60rpx;
      margin-top: 20rpx;
    }
    
    .videoStyle {
      width: 100%;
      height: 400rpx;
      margin-top: 30rpx;
    }
    
    .imgContainer {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-top: 40rpx;
    }
    
    .imgContainer .imgListContainer:nth-child(3n-1) {
      border-left: 1px solid #353439;
      border-right: 1px solid #353439;
    }
    
    .imgListContainer {
      width: 33.333%;
      height: 240rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #353439;
      /* overflow: hidden; */
    }
    
    .imgListContainer image {
      width: 100%;
      height: 100%;
    }
    
    .tabContainer {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      height: 70rpx;
      line-height: 70rpx;
      font-size: 28rpx;
      /* border-bottom: 2rpx solid #d9d9d9; */
      color: #323232;
    }
    
    .tabActive {
      color: #60ad99;
    }
    

    云开发的数据库截图:

     

    展开全文
  • 只有虚拟主机,不用cdn的话,无法https,怎么破? 可以找类似 阿里云、腾讯云 做反向代理吗? 请求都映射 我的 虚拟主机 或者其它方法
  • 对于搞过微信小游戏的朋友都知道微信小游戏的资源包内体积不能超过4M,超过了4m的话在微信开发工具中不要说上传了,你连预览都预览不了,那么对于稍微体积大一点的小游戏就有点尴尬了,当初为了这个限制确实也是弄的...

    对于搞过微信小游戏的朋友都知道微信小游戏的资源包内体积不能超过4M,超过了4m的话在微信开发工具中不要说上传了,你连预览都预览不了,那么对于稍微体积大一点的小游戏就有点尴尬了,当初为了这个限制确实也是弄的很蛋疼,为了减少包体就压图,导致的结果会是有些图的质量在游戏中显得很差,所以后来根据文档把资源部署到服务器上确实解决了很大的问题,没弄过的朋友可以先去看看文档,链接https://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame.html,看发布到小游戏的资源管理这部分,如下图:
    在这里插入图片描述
    现在我说一些需要注意的地方和流程,首先构建时,在 构建发布 面板中勾选 md5Cache 功能。然后设置 远程服务器地址,然后点击 构建,说一下这远程服务器地址,在测试的阶段,我们可是使用本地服务器去测试,接着构建完成后将微信小游戏发布包目录下的 res 文件夹完整的上传到服务器,最后删除本地发布包目录下的 res 文件夹。这个是文档给的流程。我说下具体做法,首先是代码部分,需要你在游戏启动的时候去做平台判定,因为你肯定不仅仅只做微信平台对吧,对于不需要的,小伙伴自行考虑删除吧,调用init方法

    init(){
        
        if(cc.sys.platform==cc.sys.WECHAT_GAME){
            console.log('当前环境为微信环境');
            this.weChat_GameInit();
        }else if(cc.sys.platform==cc.sys.ANDROID){
            console.log('当前环境为安卓环境')
            this.enterGame();
        }else if(window.swan != undefined){
            console.log('当前环境为百度小程序环境')
            this.bdGameInit();
        } else {
            console.log('其他环境');
            this.enterGame();
        }
    },
    

    接下来就是微信平台的话,你需要先判断本地有没有本地存储的资源,没有的话从服务器上把res的压缩包下下来,然后解压是吧,所以之后的代码如下(代码中有些代码是无用的,可根据流程自行选择):

    //微信初始化 ,这里我做了本地存储版本的值,这样更新版本的时候,会删除旧的下载新的
    weChat_GameInit(){
        let version=cc.sys.localStorage.getItem(WECHAT_GAME_VERSION);
        if(version!=Game_Version){
            wx.getFileSystemManager().rmdir({
                dirPath: wx.env.USER_DATA_PATH + "/res",
                recursive: true,
                complete: function () {
                    game.loadZIPFile();
                }
            });
        }else {
            game.enterGame();//直接进入游戏
        }
    },
    // zip下载文件
    loadZIPFile() {
        const self = this;
        wx.downloadFile({
            url: wxDownloader.REMOTE_SERVER_ROOT + "/res.zip",
            success: function (res) {
                self.unZipFile(res.tempFilePath, wx.env.USER_DATA_PATH);
            },
            fail: function (err) {
                game.showWxModel("下载文件失败,请稍后重试");
            }
        });
    },
    //解压文件
    unZipFile(resource, tartet) {
        wx.getFileSystemManager().unzip({
            zipFilePath: resource,
            targetPath: tartet,
            success: function () {
                //资源解压成功之后就可以开始进入游戏的流程啦
                game.enterGame();
                cc.sys.localStorage.setItem(WECHAT_GAME_VERSION, Game_Version);
            },
            fail: function (res) {
                game.showWxModel("解压失败,请稍后重试");
            }
        });
    },
    

    好了,代码部分就这么多,接下来构建就行了,别忘记配置远程服务器地址,测试的话,可以用本地的服务器地址就好,然后我详细说一下,测试阶段用的本地服务器地址,我用的是这个方法做的,如下图:
    在这里插入图片描述

    总之,你只要能在百度上用访问到自己的本地服务器下资源文件夹就行,方式很多,不详细说了,然后把你构建出来的wechatgame文件夹下的res文件复制到本地服务器的文件夹下就行,然后打成zip包,然后把wechatgame文件夹下的res文件删了就行,然后你就可以运行了,在你的微信开发工具里看效果了,在微信开发工具里把不校验合法域名勾选上,最后你就能看到效果了,只不过第一次加载资源的话肯定是稍微慢点,当本地有缓存了之后在进入就会快很多,如果依旧没什么问题的话,就可以把访问的地址改成你们正在用的服务器地址,把res文件和res的zip包放在你们服务器对应的文件夹下面,如果嫌进入游戏加载资源慢的话可以加个CDN,访问能稍微快点,但是第一次进都会稍微慢点,因为要下载资源呀!微信小游戏的说完了,我下篇文章会说一下百度小游戏的资源部署到服务器上,其实都是一样的。

    展开全文
  • 如果一个程序里有多处地方用到用户上传图片等功能的话,建议还是放到阿里云或者千牛云等其他平台上来存储我们的图片,可以给公司的服务器减少很多压力,磁盘存储也就不会太大 2、提升用户体验感 我们开发的产品...

    我们先讲下为什么要把图片文件上传到云服务器呢, 有什么好处呢?

    1、能减轻我们自己服务器的带宽

    如果一个程序里有多处地方用到用户上传图片等功能的话,建议还是放到阿里云或者千牛云等其他平台上来存储我们的图片,可以给公司的服务器减少很多压力,磁盘存储也就不会太大

    2、提升用户体验感

    我们开发的产品一般都是以用户体验感为主对吧?

    当用户在使用我们的小程序上传图片时,如果一次上传了多张,我们的服务器接口肯定是要进行对这些上传文件进行处理,如果同一时间访问量大的话,我们的程序先处理这些请求,在把图片存放到某个文件里,再返回给客服端结果,处理的相对是比较慢的,用户等待的时间也就比较长,体验感不好。

    如果换成上传图片到云服务器上,我们就可以直接把这个外网可访问的图片地址在前端拿到,然后后端接收在存入数据库,最后再返回结果就好,处理的时间就大大的减少了

    接下来切入主题,先看下目录结构,也就是我们小程序需要用到的文件如下:

     

    config.js:配置文件,代码如下:

    var fileHost = "https://xxx/";//你的阿里云OSS地址  在你当前小程序的公众号后台的uploadFile 合法域名也要配上这个域名
    var config = {
       uploadImageUrl: `${fileHost}`, // 默认存在根目录,可根据需求改
       AccessKeySecret: 'xxx',        // AccessKeySecret 去你的阿里云上控制台上找
       OSSAccessKeyId: 'xxx',         // AccessKeyId 去你的阿里云上控制台上找
       timeout: 80000 //这个是上传文件时Policy的失效时间
    };
    module.exports = config

    fileHost:把 xxx 替换成你的阿里云oss地址

    AccessKeyId和AccessKeySecret怎么拿到?

    可以百度搜下或者看下阿里云的帮助文档 地址:https://helpcdn.aliyun.com/knowledge_detail/48699.html

    uploadFile.js:主要的业务逻辑实现过程,代码如下:

    const env = require('config.js'); //配置文件,在这文件里配置你的OSS keyId和KeySecret,timeout:87600;
    
    const base64 = require('base64.js');//Base64,hmac,sha1,crypto相关算法
    require('hmac.js');
    require('sha1.js');
    const Crypto = require('crypto.js');
    
    /*
     *上传文件到阿里云oss
     *@param - filePath :图片的本地资源路径
     *@param - dir:表示要传到哪个目录下
     *@param - successc:成功回调
     *@param - failc:失败回调
     */
    const uploadFile = function (filePath, dir, successc, failc) {
       if (!filePath || filePath.length < 9) {
          wx.showModal({
             title: '图片错误',
             content: '请重试',
             showCancel: false,
          })
          return;
       }
    
       console.log('上传图片.....');
       //图片名字 可以自行定义,     这里是采用当前的时间戳 + 150内的随机数来给图片命名的
       const aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
    
       const aliyunServerURL = env.uploadImageUrl;//OSS地址,需要https
       const accessid = env.OSSAccessKeyId;
       const policyBase64 = getPolicyBase64();
       const signature = getSignature(policyBase64);//获取签名
    
       wx.uploadFile({
          url: aliyunServerURL,//开发者服务器 url
          filePath: filePath,//要上传文件资源的路径
          name: 'file',//必须填file
          formData: {
             'key': aliyunFileKey,
             'policy': policyBase64,
             'OSSAccessKeyId': accessid,
             'signature': signature,
             'success_action_status': '200',
             // 'x-oss-security-token': '如果有发现上传不成功的问题,可能是你的阿里云oss上的accesskey的权限不是允许所有应用访问的,可以把这个参数也一起上传试一下',
          },
          success: function (res) {
             if (res.statusCode != 200) {
                failc(new Error('上传错误:' + JSON.stringify(res)))
                return;
             }
             successc(aliyunServerURL + aliyunFileKey);
          },
          fail: function (err) {
             err.wxaddinfo = aliyunServerURL;
             failc(err);
          },
       })
    }
    
    const getPolicyBase64 = function () {
       let date = new Date();
       date.setHours(date.getHours() + env.timeout);
       let srcT = date.toISOString();
       const policyText = {
          "expiration": srcT, //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了 
          "conditions": [
             ["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb
          ]
       };
    
       const policyBase64 = base64.encode(JSON.stringify(policyText));
       return policyBase64;
    }
    
    const getSignature = function (policyBase64) {
       const accesskey = env.AccessKeySecret;
       const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
          asBytes: true
       });
       const signature = Crypto.util.bytesToBase64(bytes);
       return signature;
    }
    
    module.exports = uploadFile;

    注释都写在文件里头了,你们慢慢看哈!

    'x-oss-security-token': '如果有发现上传不成功的问题,可能是你的阿里云oss上的accesskey的权限不是允许所有应用访问的,可以把这个参数也一起上传试一下哈,希望可以帮助到你们'

    主要说下图片的命名,我是采用时间戳 + 随机数的方式和后缀为.png格式的图片文件;

    你们可以替换成你自己想要的格式; 可以把上面的这句话 从 new Date() 开始往后进行修改

    其他的文件都是一些算法文件,我都打包了,最后再给们源文件的地址链接 0.0

    如何使用?

    在你需要用的页面上,比如我们index.wxml里有个按钮如下:

    <button type='primary' bindtap='choose'>选择照片</button>

    在index.js文件里引入:

    //index.js
    //获取应用实例
    const app = getApp()
    var uploadImage = require('../../utils/uploadFile.js');//地址换成你自己存放文件的位置
    var util = require('../../utils/util.js');
    
    Page({
       data: {
    
       },
    
       //选择照片
       choose: function () {
          wx.chooseImage({
             count: 9, // 默认最多一次选择9张图
             sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
             sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
             success: function (res) {
                // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
                var tempFilePaths = res.tempFilePaths;
                var nowTime = util.formatTime(new Date());
    
                //支持多图上传
                for (var i = 0; i < res.tempFilePaths.length; i++) {
                   //显示消息提示框
                   wx.showLoading({
                      title: '上传中' + (i + 1) + '/' + res.tempFilePaths.length,
                      mask: true
                   })
    
                   //上传图片
                   //你的域名下的/cbb文件下的/当前年月日文件下的/图片.png
                   //图片路径可自行修改
                   uploadImage(res.tempFilePaths[i], 'images/' + nowTime + '/',
                      function (result) {
                         console.log("======上传成功图片地址为:", result);
                         //做你具体的业务逻辑操作
    
                         wx.hideLoading();
                      }, function (result) {
                         console.log("======上传失败======", result);
                         //做你具体的业务逻辑操作
    
                         wx.hideLoading()
                      }
                   )
                }
             }
          })
       }
    })
    

    以上是可以支持多图上传的,传一张也是可以的;  上传图片后具体存放在哪的位置可自行定义!

    好了,上传成功拿到图片地址,就可以为所欲为的做你想做的事了~~

    最后贴下我这项目的GitHub地址,所有的文件都在这:

    https://github.com/hujinchen/Image_upload_aliyun

    展开全文
  • 微信开发之微信小程序性能优化

    微信小程序的开发,是当前移动端开发的重点,随着这么多年微信小程序的发展,也基本进入到了一个相对稳定的状态,大家当前不紧紧对功能要求更高了,对性能的要求也是越来越高,那么微信小程序的性能优化就是当前的重点,那么微信小程序性能优化应该从哪些方面入手呢?

    首先看下小程序的加载流程:

    preview

    以上图就是小程序的加载流程,主要分三个步骤:

    1. 资源准备,就是说小程序在下载资源包;
    2. 业务代码注入和渲染,就是说小程序开始将业务代码注入到视图层和逻辑层,然后开始渲染页面;
    3. 异步数据请求,就是当进入首页如果有数据请求,那么现在开始异步数据加载。

    了解了小程序的启动过程后,我们就具体说说小程序性能的优化:

    1、代码包大小的优化

    代码包的大小会直接影响小程序的启动速度,代码包越大,那么下载包的时间也就会越长,代码注入的时间也就会越长,所以控制包的大小势在必行:

    (1)控制包大小

    • 在开发完成之后,上传代码的时候,开发工具会自动压缩代码,将包的体积变小,另外也可以通过第三方工具,如webpack,gult等打包工具压缩代码;
    • 要把文件中的没有用的文件,无用代码,及时清理掉,这样也可以缩减代码包;
    • 要尽量将类似于图片等资源放到cdn上,因为小程序对资源文件的压缩比例特别的小;

    (2) 分包加载 + 分包预加载

    分包加载:我们如果不做分包,那么也就意味着小程序在初次加载的时候,将会把小程序的所有包都下载下来,那么这个过程中就会将暂时用不到的包也下载下来,这岂不是又费时又费力,所以,我们要分包下载,首先将tab页放到主包中,那么在最开始加载的时候加载主包,其他的按需加载,这样就实现了分包下载。性能也就提高了。可分包加载也有它的局限性,用户首次打开分包页面时,需要先进行分包代码的加载和注入,会造成页面切换时产生一定的延时,因此在此基础上,官方又推出了分包预加载和独立分包。

    分包预加载:提前配置可能会跳到哪些分包,框架在进入页面后根据配置进行预下载,分包预加载会在你进入主包页面后,为你静默开启分包代码的下载和注入,这个过程是无感的。分包预加载需要注意的是:同一个分包中的页面享有共同的预下载大小限额2M,限额会在工具中打包时校验,因此不能把所有的分包页面都配置到分包预加载的配置中,只配置主包页面会跳转的页面即可。

    (3)独立分包

    从分包页面启动时,必须依赖于主包的下载和注入,启动所以就会收到主包大小的限制,因此,我们就需要独立分包,这样在启动页面的时候,就可以不依赖于主包,减少了主包的下载和注入时间,通常会将广告,活动等具有独立逻辑的代码做独立分包。

    2、首屏加载优化

    • 提前发起请求,异步数据数据请求不需要等待页面渲染完成;
    • 利用缓存,可以将异步请求的数据缓存,下次进入页面的时候,可以先从缓存中获取,如果没有,再发起异步请求;
    • 避免白屏:先展示页面骨架和基础内容;
    • 及时反馈:及时地对需要用户等待的交互操作给出反馈,避免用户以为小程序没有响应 

    3、渲染优化

    clipboard.png

    上图是小程序的渲染流程。可以看出:js引擎和native都可以通过js的计算或者data修改来对Webview发起绘制操作,但是对开发者来说最重要的就是js引擎和Webview之间的通信,这通信过程是一个跨进程通信,是非常耗时的一个过程。所以:

    (1)避免使用setData不当

    • 使用data在方法间共享数据,会增加setData传输的数据量,同时会增加页面重绘的概率
    • data仅包括与页面相关的数据
    • 使用setData传输大量数据,通讯耗时与数据量正相关,页面更新延迟可能造成更新开销增加
    • 仅传输页面中发生变化的数据,使用setData的特殊key实现局部更新
    • 后台页面进行setData抢占前台页面的资源
    • 页面切入后台后的setData调用,延迟到页面重新展示的时候执行

    总结来说就是在data中只定义与页面渲染相关的数据,其他与页面渲染无关的数据都定义成普通变量,在做setData操作时,尽量只传输页面渲染需要的数据,当页面切换时,将后台执行的setData操作销毁,等到页面重新展示的时候再执行。

    (2)避免使用onPageScroll不当

    • 只在必要的时候监听pageScroll事件
    • 避免在onPageScroll中执行复杂逻辑
    • 避免在onPageSroll中频繁调用setData
    • 避免频繁查询节点信息(SelectQuery),部分场景使用节点布局相交状态监听(IntersectionObserver)替代

    由于onPageSroll事件监听在处理js引擎和webview之间的通信时也是一个跨进程通信,因此在使用onPageScroll事件时,要注意以上的几点内容,来进行相关的优化

    (3)使用自定义时间

    在需要频繁更新的场景下,自定组件的更新只在组件内部更新,不受页面其他部分内容复杂性影响,这样也可以在一定程度优化渲染性能。

    小程序的性能优化大致说这么多,当然还有很多要做。。。。请在评论区留言。。。。。

    展开全文
  • 一年的时间里,前前后后都在搞微信开发的相关模块,这不前一阵子,公司又开了个新项目,其中有一个就是类似于微信朋友圈的功能(我也不知道为啥要开发微信已有的功能啊,泪奔...),其中包含上传图片、录音、视频等...
  • 如果你通过搜索找了了这里,应该是问题的具体情况,大致富文本里的某些图片放到微信的编辑器会显示上传失败,打开network发现微信返回了15001, 解决办法:删除图片地址中的感叹号和之后的内容 比如 xx....
  • 浅谈我对微信小程序云开发的认识与见解一、微信小程序云开发的优点1.无需自建服务器2.项目快速上线3.轻轻松松获取用户凭证二、微信小程序云开发的坑1.基础版CDN流量太少2.云数据库限制多(1)小程序端读取限制(2)...
  • 腾系的抠门是出了名的,这云开发名义是给开发者提供免费的服务器和数据库,...云服务虽然是为了给你提供一个免费的后台,但其实这个后台处理能力很弱,它希望你能大部分的运算都放到小程序前端,云服务后台只...
  • 在读取OSS图片CDN分发时流量大量消耗,导致资金费用增加。 网络图片比较大时,图片加载缓慢。 为了尽量减少上面两个问题,所以对已读的图片进行缓存处理,减少多次访问不必要的流量消耗。 ♠ 小程序的文件系统 文件...
  • wxml->wcc编译->javascript ...首次加载cdn 小程序包 冷加载读取缓存/检查更新 热加载直接后台切前台 ajax请求server response webview预加载 微信小程序以及后台交互架构 后端服务 服务a...
  • 微信小程序开发需要基于微信提供的开发者工具与 SDK。如果开发者对小程序开发流程不熟悉,建议先系统学习:微信小程序开发官方文档。 由于微信官方文档比较详细,本文对小程序开发流程中的框架说明、API 调用、组件...
  • 这是第一次接触微信开发,需要做一次微信活动,主要还是html5+js开发,但需要用一些微信的js-sdk及后端sdk,而此次需要的实现的功能比较简单,需要做上传图片和微信分享。 1.js-sdk的引入 可以直接在页面里引入 在...
  • 1. 需求最近产品大大又又又搞事情,说什么想要在微信H5项目中做一个医生邀请提问的功能,可以将医生的二维码名片分享出去,之前图片由后端生成并且会缓存三天导致信息更新不及时; 我一听,这好说,不就是个保存图片...
  • 由于微信小游戏限制包体大小只能4M,然而一个小游戏只要是有点东西的,4,5M太正常了,那么我们要怎么办呢 Cocos Creator为我们提供了两种解决方案 通过cc.loader.load来从服务器远程加载资源,但是,单独为了一个...
  • 微信是现在人手都有的最便捷的通讯工具了,随着腾讯的不断开发微信的功能日益完善,前几年开始火热的小程序也带动了微信卖货的营销模式,着实是给微信增添了一个利器啊,能使微信更好的普及每一个行业的人群!...
  • Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务,众多大佬公司都在使用。 2 重点介绍几个组件 接下来说说使用频率比较多,功能强大,但又有比较...
1 2 3 4 5 ... 20
收藏数 3,609
精华内容 1,443
关键字:

微信开发把图片放到cdn上