微信小程序问题解决记录

朴灿烈づ我的快乐病毒、 2022-10-31 00:47 32阅读 0赞

> 小程序文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/][https_developers.weixin.qq.com_miniprogram_dev_framework]  
> 交流专区：[https://developers.weixin.qq.com/community/develop/mixflow][https_developers.weixin.qq.com_community_develop_mixflow]

### 文章目录 ###

*   *  17、微信小程序渲染 html
     *  16、微信小程序如何封装api接口
     *  15、微信小程序组件的使用
     *  14、微信小程序——自定义图标组件
     *  13、小程序报错：TypeError: wx.getMenuButtonBoundingClientRect is not a function
     *  12、多重循环取值
     *  11、src地址拼接
     *  10、微信小程序拾色器（颜色选择器）
     *  9、自定义navigationBar顶部导航栏
     *  8、图片背景铺满并居中
     *  7、小程序页面之间跳转的时候，怎么传递参数？
     *  6、swiper 轮播图组件的高度设置问题
     *  5、微信小程序 form-data传参
     *  4、微信小程序的提示框 showToast 和 showLoading
     *  3、navigator无法跳转
     *  2、微信小程序页面与js方法传值的用法
     *  1、实现微信小程序跳转到小程序

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

## 17、微信小程序渲染 html ##

1、在小程序项目根目录下通过 npm 安装组件包

# 通过 npm 获取
    npm install mp-html

2、开发者工具中勾选 使用 npm 模块 并点击 工具 - 构建 npm

3、在需要使用页面的 json 文件中添加

{ 
      "usingComponents": { 
        "mp-html": "mp-html"
      }
    }

4、使用

wxml 文件中添加

<mp-html content="{ {html}}" />

js 文件中添加

Page({ 
      onLoad () { 
        this.setData({ 
          html: '<div>Hello World!</div>'
        })
      }
    })

> mp-html：[https://jin-yufeng.gitee.io/mp-html/\#/overview/quickstart][https_jin-yufeng.gitee.io_mp-html_overview_quickstart]

## 16、微信小程序如何封装api接口 ##

[https://blog.csdn.net/m0\_45234510/article/details/115679967][https_blog.csdn.net_m0_45234510_article_details_115679967]

## 15、微信小程序组件的使用 ##

在components下新建组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]  
组件的js，可设置接收页面传过来的值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]

组件的wxml，数据绑定![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2][]

在需要的页面导入组件：

"usingComponents": { 
        "event-introduce": "/components/event-introduce/index"
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]

wxml中使用

<event-introduce style="z-index:99;" eventData="{ {item}}" title="{ {item.name}}" introduce="{ {item.introduction}}"
            show="{ {show_brief_introduce}}" color="linear-gradient(to bottom, #e65274, #c75e4c);">
          </event-introduce>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]

## 14、微信小程序——自定义图标组件 ##

[https://www.cnblogs.com/sese/p/9765344.html][https_www.cnblogs.com_sese_p_9765344.html]

## 13、小程序报错：TypeError: wx.getMenuButtonBoundingClientRect is not a function ##

解决方法：

点击右上角的“详情”  
点击“本地设置”  
点击调试基础库的右边版本选择框  
选择（最）高版本  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]

## 12、多重循环取值 ##

![在这里插入图片描述][20210408201519890.png]

## 11、src地址拼接 ##

src="{ {'https://xxx.com/' + item3.imageList[0].uuid}}"

## 10、微信小程序拾色器（颜色选择器） ##

第一步，安装：

npm install mini-color-picker --save

![在这里插入图片描述][2021040320374937.png]  
第二步：  
点击开发者工具中的菜单栏：工具 --> 构建 npm;  
勾选“使用 npm 模块”选项  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]

第三步：导入

"usingComponents": { 
        "color-picker":"/components/color-picker/color-picker"
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]

第四步：  
js

Page({ 
    
      data: { 
        rgb: 'rgb(7,193,96)',
        pick: false
      },
      
      //显示颜色选择器
      toPick: function () { 
        this.setData({ 
          pick: true
        })
      },
      //选择颜色
      pickColor(e) { 
        console.log(e)
        this.setData({ 
          rgb: e.detail.color
        })
      },
      
    })

wxss

/* 颜色板 */
    .color-block { 
      width: 218rpx;
      float: right;
      text-align: center;
      color: white;
    }
    
    .page__hd { 
      padding: 40px;
    }
    
    .page__title { 
      text-align: left;
      font-size: 20px;
      font-weight: 400;
    }
    
    .page__desc { 
      margin-top: 5px;
      color: rgba(0, 0, 0, 0.5);
      text-align: left;
      font-size: 14px;
    }

wxml

效果：  
![在这里插入图片描述][20210408201118830.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]

> [参考链接][Link 1]

## 9、自定义navigationBar顶部导航栏 ##

[https://www.cnblogs.com/sese/p/9761713.html][https_www.cnblogs.com_sese_p_9761713.html]

"navigationStyle": "custom"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]

参考：[https://developers.weixin.qq.com/community/develop/article/doc/000a8c989307888cbe1abbf675f413][https_developers.weixin.qq.com_community_develop_article_doc_000a8c989307888cbe1abbf675f413]

## 8、图片背景铺满并居中 ##

.image_info{ 
      background-image: url(https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=387081093,1020722842&fm=26&gp=0.jpg);
      width: 100%;
      height: 100%;
      background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
      position: absolute; /* 不可缺少 */
      background-position: center;
    }

## 7、小程序页面之间跳转的时候，怎么传递参数？ ##

要传参的页面：

第二个页面，接收参数的页面：

data: { 
        id:''
      },
    
    onLoad: function(options) { 
        this.setData({ 
          id: options.id
        })
      },

## 6、swiper 轮播图组件的高度设置问题 ##

在wxss中加入：

swiper{ 
      height: 100vh;  
    }

// 或者

## 5、微信小程序 form-data传参 ##

只需要在header头里添加 “content-type”: “application/x-www-form-urlencoded”  
例子：

/**
     * post请求封装(不需要头文件)
     * @param { *} uri 请求地址
     * @param { *} params 请求参数
     * @param { *} success 成功方法
     * @param { *} fail 失败方法
     */
    function httpRequest(uri, params, success) { 
      wx.showLoading({ 
        title: '加载中...',
      })
      wx.request({ 
        url: host+uri,
        data: params,
        method: "POST",
        header: { 
          "content-type":"application/x-www-form-urlencoded"
        },
        success: function(response) { 
          wx.hideLoading()
          console.log(response.data)
          success(response)
        },
        fail: function(error) { 
          wx.hideLoading()
          console.log(error)
        }
      })
    }

## 4、微信小程序的提示框 showToast 和 showLoading ##

showToast 举例：

wx.showToast({ 
      title: '成功',
      icon: 'success',
      duration: 2000
    })

showLoading 举例，在发起网络请求前显示“加载中…”，在结束时关闭信息：

wx.showLoading({ 
      title: '加载中...',
    })
     
    wx.request({ 
      url: ...,
      ...,
      success: (res) => { 
      },
      fail: () => { },
      complete: () => { 
        wx.hideLoading()
      }
    })

## 3、navigator无法跳转 ##

如果跳转的页面定义在了tabBar里面，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]  
则需要：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]

## 2、微信小程序页面与js方法传值的用法 ##

微信小程序页面与js方法与传统的方法不一致，需要传的值不能直接写在()里面，需要自己定义属性

定义方法后，自定义属性data-src(data-固定,后面是自定义，比如data-abc、data-adcd都可以),“=”后面填值。注意:微信小程序填写变量是\{ \{abc\}\}这种模式。

data-copy="{ {value}}"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 13]

e.currentTarget.dataset.copy

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]

## 1、实现微信小程序跳转到小程序 ##

![在这里插入图片描述][20210315211943473.png]  
![在这里插入图片描述][20210315212116622.png]

js:

linklist:[
          { appid: "xxxxxx", linkname: "小R代理IP", description:"提供免费稳定的IP", img: "../../lib/images/logo_ip.jpg"},
        ],

wxss:

/* 跳转小程序样式 */
    .link-container { 
    	margin: 50rpx 30rpx;
    }
    .link-item { 
    	display: -webkit-box;
    	display: -webkit-flex;
    	display: flex;
    	-webkit-box-orient: horizontal;
    	-webkit-box-direction: normal;
    	-webkit-flex-direction: row;
    	        flex-direction: row;
    	-webkit-box-pack: justify;
    	-webkit-justify-content: space-between;
    	        justify-content: space-between;
    	height: 160rpx;
    	padding: 30rpx;
    	margin: 20rpx auto;
    	background-color: #fff;
    	-webkit-border-radius: 10rpx;
    	        border-radius: 10rpx;
    	-webkit-box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, .2);
    	        box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, .2);
    }
    .logo image { 
    	-webkit-border-radius: 50%;
    	        border-radius: 50%;
    	width: 100rpx;
    	height: 100rpx;
    	-webkit-box-shadow: 0 0 2px 1px rgba(0, 140, 186, .5);
    	        box-shadow: 0 0 2px 1px rgba(0, 140, 186, .5);
    }
    .link-middle { 
    	width: 70%;
    	display: -webkit-box;
    	display: -webkit-flex;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-webkit-flex-direction: column;
    	        flex-direction: column;
    	-webkit-box-pack: justify;
    	-webkit-justify-content: space-between;
    	        justify-content: space-between;
    	margin: 0 20rpx;
    }
    .title { 
    	vertical-align: text-top;
    	font-size: 35rpx;
    	font-weight: 500;
    	font-weight: bold;
    }
    .desciption { 
    	font-size: 26rpx;
    }
    .go-link { 
    	display: -webkit-box;
    	display: -webkit-flex;
    	display: flex;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-webkit-flex-direction: column;
    	        flex-direction: column;
    	justify-items: center;
    	-webkit-box-pack: center;
    	-webkit-justify-content: center;
    	        justify-content: center;
    }
    .go-link image { 
    	height: 50rpx;
    	width: 50rpx;
    }

html:

<view class="link-container" wx:for="{ {linklist}}" wx:key="linklist">
          <navigator target="miniProgram" appId="{ {item.appid}}">
            <view class="link-item">
              <view class="logo">
                <image src="{ {item.img}}"></image>
              </view>
              <view class="link-middle">
                <view class="title">{ { item.linkname}}</view>
                <view class="desciption">{ { item.description}}</view>
              </view>
              <view class="go-link">
                <image src="../../lib/images/to.png"></image>
              </view>
            </view>
          </navigator>
        </view>

[https_developers.weixin.qq.com_miniprogram_dev_framework]: https://developers.weixin.qq.com/miniprogram/dev/framework/
[https_developers.weixin.qq.com_community_develop_mixflow]: https://developers.weixin.qq.com/community/develop/mixflow
[https_jin-yufeng.gitee.io_mp-html_overview_quickstart]: https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart
[https_blog.csdn.net_m0_45234510_article_details_115679967]: https://blog.csdn.net/m0_45234510/article/details/115679967
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: /images/20221024/020ae8c24e474b83b3912bf3b84b07fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: /images/20221024/c23c0643e4d444e288927786ea87fb4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: /images/20221024/78d54b979d7b43e893f910dabd890519.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: /images/20221024/7181f9208c3a4e04a224c4e2aabda95c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]: /images/20221024/23793b11d8ba41049087b8b6ed582fdf.png
[https_www.cnblogs.com_sese_p_9765344.html]: https://www.cnblogs.com/sese/p/9765344.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 5]: /images/20221024/9d3a329cbe5c449db7f454df643048aa.png
[20210408201519890.png]: /images/20221024/6d06998e8cde48ac88d4f0c433e39517.png
[2021040320374937.png]: /images/20221024/59d37ce019a44409979728898dba33c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 6]: /images/20221024/239e440eab7c4e678b6481e6bbbd3f54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 7]: /images/20221024/5594c78cbdb044baa5a0640fc05c7ece.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 8]: /images/20221024/83373eb61775478fab15ae68802800d1.png
[20210408201118830.png]: /images/20221024/e8f619ee54ab405abc2ec4feb52c5212.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 9]: /images/20221024/7aed8660ff44423895952902135dc871.png
[Link 1]: https://blog.csdn.net/qq_33413259/article/details/106298856?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161745210616780271599675%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fcode.%2522%257D&request_id=161745210616780271599675&biz_id=&utm_medium=distribute.pc_search_result.none-task-code-2~code~first_rank_v2~hot_rank-1-106298856-3.research_pc_code_v1&utm_term=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%8B%BE%E8%89%B2%E5%99%A8
[https_www.cnblogs.com_sese_p_9761713.html]: https://www.cnblogs.com/sese/p/9761713.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 10]: /images/20221024/7ab4dbc91c4941beb652321baa41c648.png
[https_developers.weixin.qq.com_community_develop_article_doc_000a8c989307888cbe1abbf675f413]: https://developers.weixin.qq.com/community/develop/article/doc/000a8c989307888cbe1abbf675f413
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 11]: /images/20221024/a2f7586f80634baea3d8f5558b58bd48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 12]: /images/20221024/4326b9a7ed104edfb1bf4d161d9facf1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 13]: /images/20221024/4a74b89f85534932854bd84c2b6bce65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 14]: /images/20221024/8511eeee35f242a8961df4ceca0a0807.png
[20210315211943473.png]: /images/20221024/6a183da142194916a0da11ce06e88d54.png
[20210315212116622.png]: /images/20221024/d9ce908ca8884b4d8b95b2098e5c485e.png