小程序开发总结(一)

最近在开发一个小程序项目准备上线中也是第一个作的小程序中间遇到不少坑经过本身不断实践和努力解决了也分享给你们,缩短你们的开发时间。html

1、修改背景颜色
这是一个很常见的需求在html的中咱们能够改变body&html的标签颜色,可是在小程序中你能够经过两种方法
一、修改page的颜色
二、在app.json的文件中修改前端

"backgroundTextStyle": "#f2f2f2", //注意这里两个属性值须要一致本人亲测
"backgroundColor": "#f2f2f2"

2、地图引用(腾讯地图)ios

一、在小程序的需求当中地理位置是常见的一种需求咱们这里选用的是腾讯地图,后台用的是百度地图有人确定问为何不使用同一个地图,这里是出于百度地图开发文档比较齐全,市面上的开源的插件功能也比较齐全因此后台选用的是百度地图,小程序的爸爸是腾讯因此选的腾讯地图可是在后台须要对经纬度值作一个转换由于百度和腾讯的地图不是同一种经纬度标准。
图片描述
后期仍是须要统一地图标准json

腾讯地图使用方法小程序

  1. 腾讯地图官网申请一个开发者账号附(http://lbs.qq.com/mykey.html
  2. 建立一个密钥
  3. 在微信公众号平台设置一个安全域名
    这里有个坑若是你不设置这个安全域名在手机演示中没法访问地图api须要打开调试模式才行
  4. 具体api能够看腾讯地图文档

3、寻找监听安卓返回事件或者ios的顶部的返回事件api

我以前一直想找到这个事件由于某些页面返回的时候须要返回到指定页面而不是父级路由过来的页面后面用小程序的生命周期函数解决了这个问题安全

onUnload(){
    wx.switchTab({
        url: '/pages/order/index',  // 这里就是你一路向西的地方
        fail: function (res) {
        }
    })
}

4、字体图标微信

我相信不少前端的开发者用完iconfont确定是爱不释手了可是小程序不能用
图片描述app

谁叫阿里腾讯不是一家人了,不过这个仍是有一个解决办法xss

  1. 由于小程序背景图只支持base64的咱们能够将iconfont文件转换为base64的
  2. 从iconfont把文件下载下来记住咱们要选择fontClass的模式
  3. 而后在这个平台https://transfonter.org/把字体文件转换成base64
  4. 在lib文件中引入
    图片描述
  5. 在wxss加入字体
    图片描述

    大功告成(后续不断更新···)

相关文章
相关标签/搜索