微信小程序开发心得

1.image图片

小程序的image元素有一个mode属性来设置图片裁剪、缩放的模式,而且image组件默认宽度300px、高度225px。 也就是说,如果不设置mode属性,只设置width的值,图片肯定是会变形的,因为该图片的高度现在是225px而不是自适应的。

俩种解决方案:
 - 设置mode属性: mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式
   例如: 设置mode="widthFix"后只设置width属性,图片也可以自适应
 - 设置width和height将图片的宽高固定

2.长按识别小程序码(小程序不识别普通二维码)

俩种解决方案
 - 通过小程序wx.previewImage预览
    <view>
        <image src="图片路径" data-src="图片路径" bindtap="previewImage" />
    </view>
    
    var current = e.target.dataset.src;
    wx.previewImage({
      current: current,
      urls: [current]
    })
 
 - web-view嵌套h5页面长按自动识别小程序码
    1.首先需要小程序管理后台设置业务域名
    注:开发账号一定要是公司类型账号;个人类型和海外类型暂不支持!
    只有公司账号才可以看到业务域名添加入口;且业务域名只支持https,需要备案;
    域名格式只支持英文大小写字母、数字及“- ”,不支持IP地址及端口号

微信小程序开发心得

2.<web-view src="嵌套页面网址"></web-view>
      第三方网页以及网页iframe涉及到的所有域名,都要是https,并且要加域名校验
      如果出现闪屏问题, 要注意查看网络请求
    3.web-view 组件内包含的网页支持跳转返回小程序
      首先引入小程序官方提供的基本js库
      <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
      其次,根据api,在网页上加上相关处理代码,
      wx.miniProgram.reLaunch({url: '/pages/index/index'})

相关推荐