小程序遇到的一些问题

以你之姓@ 2022-11-05 03:06 240阅读 0赞

**目录**

1. rich-text 不识别换行符

2. 自定义小程序导航栏

3. h5跳小程序

--------------------

### 1. rich-text 不识别换行符 ###

getEnterSymbol(content){
    			if(content.trim() != ''){
    				return content.split('\n').reduce((total, cur) => total += `<p>${cur}</p>`)
    			}else{
    				return ''
    			}
    		}

### 2. 自定义小程序导航栏 ###

细节如下：

json文件里**"navigationStyle" 设置为 "custom"**

**但是每个手机型号的系统信息不同，所以样式的设置需通过如下计算得到：**

Object wx.getMenuButtonBoundingClientRect() 获取菜单按钮（右上角胶囊按钮）的布局位置信息

wx.getSystemInfo(Object object) 获取系统信息。

onLaunch: function () {
        let menuButtonObject = wx.getMenuButtonBoundingClientRect();
        wx.getSystemInfo({
          success: res => {
            let statusBarHeight = res.statusBarHeight,
              navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
              navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top -         statusBarHeight)*2;//导航高度
            this.globalData.navHeight = navHeight;
            this.globalData.navTop = navTop;
            this.globalData.windowHeight = res.windowHeight;
          },
          fail(err) {
            console.log(err);
          }
        })
      }

### 3. h5跳小程序 ###

// 动态渲染微信开发标签 跳转小程序

配置wxconfig：wx-open-launch-weapp。

注意：图片地址不能是本地图片

renderDom (item) {
    
    let script = document.createElement('script')
    
    script.type = 'text/wxtag-template'
    
    script.text = `<div style="text-align:center;margin-bottom: 29px;height: 19px;line-height: 19px;"><span style="font-weight: 500;color: #FFCFAA;font-size: 13px;">${item}</span> <img style="width: 7px;height: 12px;display: inline-block;margin-left: 4px;" src="https://xxxxx.png" </div>`
    
    let html = `<wx-open-launch-weapp style="width:100%;display:block;height:100%;" username="gh_xxxxx"path="pages/index/index.html">${script.outerHTML}</wx-open-launch-weapp>`
    
    return html
    
    },