• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序项目总结,持续更新

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1.踩坑

  •  css样式不能引用本地图片资源,只能引用线上资源(background-image),引用本地图片资源只能用<image>标签
  • {{}}不能执行函数方法,{{}}只支持基本的简单运算和ES6拓展运算符。如价格格式化这种常用的处理,只能在js代码中处理好然后再模板中渲染
  • 可以通过wxs模块解决{{}}中不能执行函数的问题。可以做到模拟vue.js中过滤器的功能。
  • 小程序不支持分享链接到朋友圈,暂时的通用做法是生成保存有页面小程序码的图片到本地相册。又用户自行发朋友圈转发。前端可以利用canvas来实现,减轻服务端压力。但是会有图片锯齿不清晰的问题。建议预览图和保存到真机的图片采用不同的尺寸。保存在真机的图片按照750的宽度实现。相比于预览图要大一些,这样保存到手机的图片会清晰很多。
  • 小程序布局采用rpx单位,UI稿按照750的宽度出图。可直接使用UI稿的尺寸。但是在某些机型上1rpx会无法显示。可以用H5的方式实现1px效果。
  • iphoneX吸底按钮的适配,可以用媒体查询获取wx.getSystemInfo获取机型。
  • 其他
    • 页面A -> 页面B,页面B的操作触发了页面A的数据更新。返回更新页面A的数据,通常有两种方式来实现(我司采用了方案二):

    • 在页面A监听onShow事件,在onShow事件触发时无脑更新页面数据。

    • 通过EventBus来实现跨页面通信。

    • 复杂组件的开发,省市区三级联动选择器的开发,获取微信地址库的地址的编码和业务采用的省市区编码对不上。

    • 页面路径的层级,最大不能超过10层。

    • 小程序小程序分包加载,微信对小程序包的大小有如下限制。

      • 整个小程序所有分包大小不超过 8M

      • 单个分包/主包大小不能超过 2M

 

@media only screen
    and (device-width : 375px)
    and (device-height : 812px)
    and (-webkit-device-pixel-ratio : 3) { }

 

2.IDE快捷键  ctrl+shift+P 手机自动预览, ctrl+?快捷注释与取消

3.小程序单元测试目前使用 miniprogram-simulate 

4.1线上api请求获取到的src图片地址转换base64

  arrayBufferToBase64 (src) {
    let _this = this
    wx.request({
      url: src,
      method: \'GET\',
      responseType: \'arraybuffer\',
      success: function (res) {
        let base64 = wx.arrayBufferToBase64(res.data);
        _this.setData({
          base64String: base64
        })
      }
    })
  }

4.2本地上传图片或照片转base64

  首先用微信提供的API,wx.chooseImage,参考https://developers.weixin.qq.com/miniprogram/dev/api/

  然后结合API,wx.getFileSystemManager

wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0], //选择图片chooseImage返回的相对路径
          encoding: \'base64\', //编码格式
          success: res => { //成功的回调
            that.setData({
              base64String: res.data
            })
            // console.log("ourUrl=" + that.data.ourUrl)
            // console.log("data:image/jpeg;base64," + res.data)
          }
        })

4.3 【走不通了...】本地上传照片或图片获得的src转base64

  由于后端提供了upload接口,首页通过wx.chooseImage选择图片上传至,照片服务器API:upload 返回src

wx.uploadFile({
          url: upload,
          filePath: res.tempFilePaths[0],// wx.chooseImage返回的数据
          name: \'file\',
          header: {
            token: app.globalData.token
          },
          success(res) {
            console.log(res.data)
            that.arrayBufferToBase64(res.data)
          }
        })

5.小程序加载,有时需要 setTimeout 后才有效,例如用户点开分享的小程序,需求立马跳出选择组件。

6.skeleton

7.图片太多加载慢:

  判断用户的设备(主要用在移动端)、网络等,分别加载不同质量的图片(例如高端 iPhone wifi 情况下,就可以加载双倍高清图等,蜂窝网络下面,就加载个单倍或者有损压缩过的)。

  或者先加载低质量的图片,让浏览者可以看到,然后再在后台加载更高清的,等加载完了,浏览者还在观看,就插入替换掉。

  或者先加载低质量小图片列表,然后让用户点击,触发类似 fancybox 的效果,弹窗出现大图片。

  或者利用资源预加载(三个 HTML5 不常见特性简介)当用户还没打开的时候,就开始加载。

  还有好多思路,后面想到再补充。
8.侧滑 https://juejin.im/post/5c63770de51d45272c3fb33a?utm_source=gold_browser_extension
9.setData 复杂的对象
// 比如 marquee: { page: \'../user/lost/lost\', text: \'\' }
// marquee 是变量
this.setData({
      [`${\'marquee\'}.width`]: \'1\',
      bolClose: true,
      [`${\'marquee\'}.text`]: 1

})    

// marquee 是属性
this.setData({
       [\'marquee.text\']: \'1\'
})

 10.百度:微信小程序1rpx border ios真机显示不全问题分析及解决方案

 11.json 文件配置

window: {
    "backgroundTextStyle": "light",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#efeff4",
    "disableScroll": true,    // 禁止下拉
    "enablePullDownRefresh": true,      // 下拉刷新
    "navigationStyle": "custom",    // 自定义导航
    "usingComponents": {
        "nav-bar": "../../components/nav-bar/nav-bar"
     }  
    // 待补充
}

 12.方法传递参数

// 传递参数只能通过 WXML 上面的属性值来传递,需要在标签上增加 data-xx 这样的属性,可以在 fn 内 event 对象的 target/currentTarget 的 dataset 获取参数。如 
const {name, detail} = e.currentTarget.dataset

 13.IDE

VS Code + minapp 插件

传递参数只能通过 WXML 上面的属性值来传递,需要在标签上增加 data-xx 这样的属性,可以在 fn 内 event 对象的 target/currentTarget 的 dataset 获取参数。如 const {name, detail} = e.currentTarget.dataset

 14.for, index 的应用

 

wx:for="{{}}"
wx:for-item="item"
wx:for-index="idx"

 

 15.传参数的data-balaContent,在调用时一律小写 e.currentTarget.dataset.balacontent

 16.下拉刷新,触底翻页

init:
pageNo: 1,
loading: true,
hasNextPage: true


 onPullDownRefresh: function () {
    this.setData({
      pageNo: 1,   // 回到第一页
      loading: false,
      empty: false
    })
    this.findOrderPage()
  },


  onReachBottom: function () {
    if (this.data.hasNextPage) {  // 判断当前页pageNo < 总页数pages
      this.setData({
        loading: true,
        pageNo: this.data.pageNo + 1
      })
      this.findOrderPage();
    }
  },

findOrderPage: function () {
    // console.log(this.data.bolReachBottom)
    let _time = -new Date().getTime();
    let _this = this;
    
    wx.request({
      url: findOrderPageUrl,
      data: {
        pageNo: _this.data.pageNo
      },
      header: {
        \'content-type\': \'application/json\',
        token: app.globalData.token
      },
      success: function (res) {
        // console.log(res);
        if (res.data.code == 200) {
          _time += new Date().getTime();
          setTimeout(function () {
            res.data.result.list.forEach(function(value, index){
              value.createTime = formatTime(value.createTime);
              value.totalPrice = formatAmount(value.totalPrice);
              //value.orderNo = value.orderNo.replace(/(\d{4})(?=\d)/g, "$1 ")
            })
            // let tmp = _this.data.list.concat(res.data.result.list);
            let tmp;
            if (_this.data.pageNo > 1) {
              tmp = _this.data.list.concat(res.data.result.list);
            } else {
              tmp = res.data.result.list;
            }
            //console.log(tmp)
            _this.setData({
              list: tmp,
              loading: false,
              hasNextPage: _this.data.pageNo >= res.data.result.pages ? false : true,
              empty: tmp.length > 0 ? false : true,
            })
            _this.setData({
              bolEmptyOrder: _this.data.list.length === 0 ? true : false
            })
            // console.log(_this.data.list)
            wx.stopPullDownRefresh()
          }, _time > 600 ? 0 : 600 - _time);

          if (!_this.data.bolReachBottom) {
            wx.hideLoading()
          }
        } else {
          //_this.findOrderPage()
          wx.stopPullDownRefresh()
        }
      }
    })
  },

 17.与页面web、app开发的区别:定时器一定要定义在 data 中,这样在跳转页面的时候执行 onhide 清除 data 里的参数才能真正销毁

 18.分享和转发

// 1.每个页面胶囊分享
onShareAppMessage: function (res) {
    let _this = this
    let uid = app.globalData.token || wx.getStorageSync(\'token\') // 分享者的uid
    let path = uid ? `/pages/home/home?source=${uid}` : `/pages/home/home` // 用户来源&任意其他参数
    return {
      title: \'降价拍\',
      path: path,
      imageUrl: imgDef
      // success回调已经废弃
    }
},

// 2.隐藏右上角胶囊里的分享并使用按钮分享
onShow () {
    wx.hideShareMenu()
}

// 3.群分享带分享信息,获取位置,群号,openId等来源,需解密。
// 这段代码将限制群内的二次转发,视情况使用
onLoad: function (options) {
    wx.updateShareMenu({
      withShareTicket: true
    })
},

// 4.群分享后获取withShareTicket,只能在app.js里获取
onLaunch (options) {
    let shareTicket = options.shareTicket
}

// 5.分享给个人的来源source的获取
onLaunch (options) {
    let source = options.query && options.query.source
}
// 6.扩展:群分享shareTicket,app.js 
    // 1044 群分享shareTicket
    // 1007 单人分享
    let source = options.query && options.query.source
    if (source && options.scene === 1007) {
      wx.setStorageSync(\'source\', {
        source: source,
        type: \'person\'
      })
    }
    if (options && options.shareTicket) {
      wx.setStorageSync(\'shareTicket\', options.shareTicket)
      this.globalData.shareTicket = options.shareTicket
    }
  // 7.upload_share_Result 上报方法
  upload_share_Result(res, type, uid) {
    let params = {
      type, // 1.person 2.group;
      uid,    // 记录来源,如果在小程序打开,来源为空;如果从别人分享的打开,来源别人的uid
      encryptedData: res ? res.encryptedData : \'\',    // 分享到群的群消息
      iv: res ? res.iv : \'\'       // 分享到群的群消息
    }
    wx.request({
      url: \'\',
      method: \'POST\',
      data: params,
      header: {
        \'content-type\': \'application/json\',
        token: app.globalData.token
      },
      success() { }
    })
  },
// 8.首页自动上报
onLoad(options) {
    let _this = this
    let shareTicket = wx.getStorageSync(\'shareTicket\')
    if (shareTicket) {
      wx.getShareInfo({
        shareTicket: shareTicket,
        success(res) {
          let source = options && options.source
          console.log(\'source: \' + source)
          if (source) {
            wx.setStorageSync(\'source\', {
              source: source,
              type: \'group\'
            })
            _this.upload_share_Result(res, \'group\', source) // 上报
          }
        }
      })
    } else {
      let sourceCache = wx.getStorageSync(\'source\')
      if (sourceCache && sourceCache.type === \'person\') {
        this.upload_share_Result(null, sourceCache.type, sourceCache.source) // 上报
      }
    }
  },

 19.小程序字符串时间的转换

let startDate = \'2020-01-02 09:50:00\'
startDate = startDate.replace(new RegExp("-", "gm"), "/");
startDate = (new Date(startDate)).getTime(); // 转为毫秒

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
全网最全微信小程序项目源码发布时间:2022-07-18
下一篇:
微信小程序 项目实战(三)list 列表页 及 item 详情页发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap