本文主要是记录在微信小程序和公众号开发过程中，遇到的坑点，以及自己的一些实用经验，借以此文分享出来。

微信小程序

样式相关

关于text标签换行显示问题

arduino 复制代码

<text>****</text>

arduino 复制代码

<text>
  ****
</text>

代码格式化text换行之后，会被解析成/n换行符，导致页面样式出错，在使用text标签时需要注意这个换行问题，避免格式化换行之后整体样式出错。

去除button原有样式

css 复制代码

button {
  margin: 0 !important;
  padding: 0 !important;
  background-color: inherit;
  position: static;
  &::after {
    content: none;
    border: none;
  }
}

小程序内嵌H5软键盘遮挡问题

软键盘遮挡问题比较常见，当点击输入的时候，经常会有键盘挡住输入框的情况，以下介绍一种亲测有效的方法：

input绑定监听聚焦事件@focus="focus"
滚动到input在页面上面的所在位置

js 复制代码

const focus = (e) => {
    // IOS低版本不兼容--过滤
    if (/OS 11_[0-3]\D/.test(navigator.userAgent)) return
    // 输入框软键盘遮挡问题
    setTimeout(() => {
        e.target.scrollIntoView && e.target.scrollIntoView({ behavior: 'smooth', block: 'center' })
    }, 300)
}

API

动态设置share信息

当你需要在同一个页面分享不同的分享信息时，你可以通过onShareAppMessage钩子暴露出来的from参数以及在分享按钮绑定的信息来区分，来设置不同的分享信息。

js 复制代码

onShareAppMessage (e) {
  const { from, target: { dataset: info } } = e;
  // 分享来源为按钮
  if(from === 'button') {
    // 分享来源为按钮
    console.log(info) // 按钮上绑定的值
    return {title:...}
  }
  // 分享来源是页面级别的
  return {title:...}
}

混入share

如果你有很多页面都需要使用类似的分享信息，你可以使用混入方法，混入 onShareAppMessage 时，需要将其放入 Behavior 的 methods 中，否则无效。

javascript 复制代码

let title = '你的默认分享主题'
let imageUrl= '你的默认分享图片地址'
let path = 'pages/index/index'  // 默认放了个首页

module.exports = Behavior({
  // 混入 onShareAppMessage 时，需要将其放入 methods 中， 否则无效
  methods: {
    onShareAppMessage() {
      return {
        title,
        path,
        imageUrl
      }
    }
  }
})

业务流程

微信小程序内嵌H5支付

微信小程序内嵌H5进行微信支付-无法走微信公众号购买的这套逻辑

坑点：开了调试之后可以正常购买

解决方法：内嵌的H5跳小程序的原生页面-支付完成后跳回

支付

支付宝内嵌H5中可以直接调用支付宝API的支付

微信内嵌H5中进行支付需要跳到微信小程序的页面进行支付

ps：微信小程序webview中通信，只会在页面跳转或初始化的时候触发

支付宝小程序中的webview可以实时通讯

微信公众号

链接点击进入后分享，只能分享纯链接

按理来说，我们都期望分享出来的是类似图中下面这种卡片的形式，但是实际上有些场景分享出来的是纯链接的形式。如果我们希望分享出来的永远是卡片的形式，需要我们通过以下的解决方案去限制。

解决方案：

1.将链接添加至公众号的自定义菜单中，从公众号菜单进入分享

2.扫描二维码分享

3.将链接保存至微信收藏中，从我的收藏进入分享

其余其他地方进入分享都是链接形式

问题产生原因：微信开放全域名访问后的官方调整

开发者社区参考： developers.weixin.qq.com/community/d...
developers.weixin.qq.com/community/d...

微信官方开放全域名访问说明 ：mp.weixin.qq.com/s/7zxqex8Du...

后记

以上就是我在微信开发过程中遇到的一些问题以及一些解决方案，有的只是简单记录，没有详细的说明，如果有细节想要讨论的欢迎留言讨论。

微信小程序和公众号开发踩坑经验分享