前端工作过程遇到的问题总结(三)--微信小程序篇

深碍√TFBOYSˉ_ 2022-04-23 14:20 238阅读 0赞

**目录**

微信小程序scroll-view横向滚动

微信小程序（页面跳转详解）

微信小程序bind事件和catch事件区别

微信小程序：button组件的边框设置

分享几个微信小程序开发框架和工具

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

### 微信小程序scroll-view横向滚动 ###

原文：[微信小程序scroll-view横向滚动][scroll-view]

<scroll-view scroll-x style="height:100rpx;white-space:nowrap">
          <view wx:for="{
       {one}}" style="display:inline-block;width:100rpx;margin-left:20rpx;">{
       {item}}        </view>
    </scroll-view>

条件：

*  在scroll-view标签使用nowrap;目的：当scroll-view里边的内容太长时，保证在一行内容纳，之前误区是我看到容器内长度太长时会自动换行，就给scroll-view设置了width,结果底下的也会滚动。
 *  容器内项使用display:inline-block
 *  scroll-view标签使用scroll-x=‘true’

### 微信小程序（页面跳转详解） ###

小程序的页面跳转主要有五种方法

*  wx.switchTab（Object object)：跳转到tabBar页面，并关闭其他所有非tabBar页面

参数

Object object

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

示例代码：

{
        "tabBar": {
            "list": [
                {
                    "pagePath": "index",
                    "text": "首页"
                },
                {
                    "pagePath": "other",
                    "text": "其他"
                }
            ]
            
        }
    }

wx.switchTab({
        url: '/index'
    })

*  wx.reLaunch(Object object)：关闭所有页面，打开到应用的某个页面

参数

Object object

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1][]

示例代码：

wx.reLaunch({
        url: 'test?id=1'
    })

// test 
    Page({ 
        onLoad (option) {
            console.log(option.query)
        }
    })

*  wx.redirectTo(Object object)：关闭当前页面，跳转的应用内的某个页面。但是不允许跳转到tabBar页面。

参数

Object object

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2][]

示例代码：

wx.redirectTo({
      url: 'test?id=1'
    })

*  wx.navigateTo(Object object)：保留当前页面，跳转到应用内的某个页面。但是不能跳到tabBar页面。使用wx.naviagteBackky可以返回到原页面。小程序中页面栈最多十层。

参数

Object object

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3][]

示例代码：

wx.navigateTo({
        url: 'test?id=1'
    })

// test.js
    Page({
        onLoad (option) {
            console.log(option.query)
        }
    })

*   wx.navigateBack(Object object)：关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈，决定需要返回几层

参数

Object object

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4][]

示例代码：

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
    
    // 此处是A页面
    wx.navigateTo({
      url: 'B?id=1'
    })
    
    // 此处是B页面
    wx.navigateTo({
      url: 'C?id=1'
    })
    
    // 在C页面内 navigateBack，将返回A页面
    wx.navigateBack({
      delta: 2
    })

总结：

1.  wx.switchTab（Object object)：跳转到tabBar页面，并关闭其他所有非tabBar页面
2.  wx.reLaunch(Object object)：关闭所有页面，打开到应用的某个页面
3.  wx.redirectTo(Object object)：关闭当前页面，跳转的应用内的某个页面。但是不允许跳转到tabBar页面。
4.  wx.navigateTo(Object object)：保留当前页面，跳转到应用内的某个页面。但是不能跳到tabBar页面。使用wx.naviagteBackky可以返回到原页面。小程序中页面栈最多十层。
5.  wx.navigateBack(Object object)：关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈，决定需要返回几层

### 微信小程序bind事件和catch事件区别 ###

在小程序中事件分成冒泡事件和非冒泡事件。参考：[微信小程序-事件][-]

bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。但是bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。如：

假如有三个view点击事件分别是用的bindtap、catchtap和bindtap

<view id="outer" bindtap="out">
    
        outer view
    
        <view id="middle" catchtap="middle">
    
            middle view
    
                <view id="inner" bindtap="inner">
    
                    inner view
    
                </view>
    
        </view>
    
    </view>

js代码：

out:function(e){
    
        console.log("--out bindtap click")
    
    }, 
    middle: function (e) {
    
        console.log("--middle bindtap click")
    
    }, 
    inner: function (e) {
    
        console.log("--inner bindtap click")
    
    }

点击out view打印出一条log ，--out bindtap click

点击middle view打印出两条log， --middle bindtap click

点击innew view打印出三条log，--inner bindtap click   --middle bindtap click

这里可以看出只有bindtap 会向上冒泡，catchtap会阻止冒泡的

### 微信小程序：button组件的边框设置 ###

微信小程序中：button的边框是用:after方式实现的，用户如果在button上定义边框会出现两条线，需要:after的方式去覆盖默认值。

如果设置了button的背景色，没有用:after设置边框的颜色，则button的四个角会出现模糊的尖角。如下图所示：

![20190318114132903.png][]

如上图四个角会模糊。.wxss代码如下：

.ceishi{
      width:130px;
      border-radius: 3px;
      margin:20px auto;
      padding-top:2px;
      font-size:14px;
      background-color:#333333;
      color:white;
      overflow:hidden;
      height:40px;
    }

在这里设置了边框的样式，但是没有生效。

修改：将.wxss代码修改如下：

将button的边框设置放在 ::after属性里面。效果如下：

![20190318114454764.png][]

总结：对于button的边框设置，要放在 ::after里面设置，才生效，要不然会出现各种问题

### 分享几个微信小程序开发框架和工具 ###

原文链接：[分享几个微信小程序开发框架和工具][Link 1]

*  官方框架MINA

小程序提供的开发框架为MINA框架，它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供一整套JavaScript API,让开发者能够非常方便地使用微信客户端提供的各种基础功能与能力，快速构建一个应用。

地址：[官方框架MINA][MINA]

*  美团小程序框架mpvue

mpvue 是美团点评开源的一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

1.  彻底的组件化开发能力：提高代码复用性
2.  完整的Vue.js开发体验
3.  方便的Vuex数据管理方案
4.  快捷的webpack构建机制：自定义构建策略、开发阶段hotReload
5.  支持使用npm外部依赖
6.  支持Vue.js命令行工具vue-cli快速初始化项目
7.  H5代码转换编译成小程序目标代码的能力

Github：[https://github.com/Meituan-Dianping/mpvue][https_github.com_Meituan-Dianping_mpvue]

官网：[http://mpvue.com/][http_mpvue.com]

*  Tina.js一款轻巧的渐进式微信小程序框架

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5][]

特性： 轻盈小巧。 极易上手，保留 MINA (微信小程序官方框架) 的大部分 API 设计；无论你有无小程序开发经验，都可以轻松过渡上手。 渐进增强，既有状态管理器，也有路由增强，还可以自己编写插件

Tina.js 开源框架地址：[https://github.com/tinajs/tina][https_github.com_tinajs_tina]

*  组件化开发框架wepy

WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。

特性：

1.  类Vue开发风格
2.  支持自定义组件开发
3.  支持引入NPM包
4.  支持Promise
5.  支持ES2015+特性，如Async Functions
6.  支持多种编译，Less/Sass/Styus、Babel/Typescript、Pug
7.  支持多种插件处理，文件压缩，图片压缩，内容替换等
8.  支持Sourcemap，ESLint等
9.  小程序细节优化，如请求列队，事件优化等

Github地址：[https://github.com/Tencent/wepy 官网地址：][https_github.com_Tencent_wepy]

官网地址：[https://tencent.github.io/wepy][https_tencent.github.io_wepy]

*  前端框架weweb

weweb是一个兼容小程序语法的前端框架，你可以用小程序的写法，来写web应用。如果你已经有小程序了，通过它你可以将你的小程序运行在浏览器中。

**特性**： 跨平台，一套代码多端运行（小程序、h5、未来直接打包成安卓、ios app也不是梦) 自带常用组件，完美继承了小程序内置组件 兼容小程序rpx语法，使页面更容易适配各种机型

地址:[https://github.com/wdfe/weweb][https_github.com_wdfe_weweb]

**小程序开发工具**

*  **图片处理工具Jinaconvert**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 6][]

Jinaconvert可以帮你把图片处理成各种需要的格式，你只需要在 Jinaconvert 上选择你需要的格式类型，再将图片文件上传至即可。

工具网站地址：[https://jinaconvert.com/cn/][https_jinaconvert.com_cn]

*  **单位转换工具postcss-px2units**

将px单位转换为rpx单位，或者其他单位的PostCSS插件。 postcss-px2units就可以使用简单的配置，轻松实现转换。而且该插件可以将px转换为任意你想转换的单位，比如rem。

地址：[https://github.com/yingye/postcss-px2units][https_github.com_yingye_postcss-px2units]

*  **腾讯云上传插件qcloud-upload**

基于nodejs的腾讯云上传插件 支持自定义文件前缀、覆盖及非覆盖上传方式

地址：[https://github.com/yingye/qcloud-upload][https_github.com_yingye_qcloud-upload]

*  **二维码工具weapp.qrcode.js**

在微信小程序中，快速生成二维码 可自定义二维码内容、宽高、纠错级别。此外，还支持生成不同前后景色的二维码。

地址：[https://github.com/yingye/weapp-qrcode][https_github.com_yingye_weapp-qrcode]

*  **微信小程序脚手架工具 wxdad**

一款微信小程序脚手架工具，帮助你快速开发微信小程序应用。目前有两个功能： 快速构建初始项目架构。 把 wxdad 语法快速编译成 wxml 和 wxjs 文件，帮助开发者急速开发。

地址：[https://gitee.com/lisniuse/wxdad][https_gitee.com_lisniuse_wxdad]

*  **小程序图标工具wx-charts**

基于 canvas 绘制、体积小巧的微信小程序图表工具。

1.  支持图表类型：
2.  饼图 pie
3.  圆环图 ring
4.  线图 line
5.  柱状图 column
6.  区域图 area
7.  雷达图 radar

地址：[https://github.com/xiaolin3303/wx-charts][https_github.com_xiaolin3303_wx-charts]

*  **小程序开发、微信公号管理系统RhaPHP**

**   **RhaPHP微信平台管理系统，支持多公众号管理，小程序开发，APP接口开发，平台反文旁虫立且快速简洁易用。灵活的扩展应用机制，具有容易上手，几乎融合微信接口，简单的调用对二次开发与开发扩展应用模块大大提高开发效率，降低企业商家运营成本。扩展应用模块化，机制灵活，代码简单并快速上手。基于THINKPHP5强力内核驱动与LAYUI前端框架，支持 Linux/Windows/Mac。

官方网站：[https://www.rhaphp.com/][https_www.rhaphp.com]

*  **即速应用：适合技术小白的小程序开发工具**

可视化操作，直接拖拽组件生成页面 提供大量可套用的模板 可将代码打包下载，直接对接到小程序的开发工具 下载下来后的代码可以任意编辑 复杂的功能仍然需要专业程序员二次开发

官网： [http://www.jisuapp.cn/][http_www.jisuapp.cn]

附：微信小程序开发者文档官网地址 [https://mp.weixin.qq.com/debug/wxadoc/dev/index.html][https_mp.weixin.qq.com_debug_wxadoc_dev_index.html]

[scroll-view]: https://blog.csdn.net/xuexixuexien/article/details/79745021%C2%A0
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70]: /images/20220308/5bf1dd1d454840fcb6fb6f3c0c27b103.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 1]: /images/20220308/9789801f079b4270a31d67d2c5f723ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 2]: /images/20220308/2dddeab082c34eb094d7c876e31cea6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 3]: /images/20220308/f4668bbfe5d04e999d87a9975d359ccf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 4]: /images/20220308/403890913d7543b899d2dff6bfaaa137.png
[-]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
[20190318114132903.png]: /images/20220308/ad8ccaac83d94912aa628f59262870ec.png
[20190318114454764.png]: /images/20220308/8da34561416045458031681ffe8b0212.png
[Link 1]: https://juejin.im/post/5ad6cd29f265da23a04a1578
[MINA]: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html
[https_github.com_Meituan-Dianping_mpvue]: https://github.com/Meituan-Dianping/mpvue
[http_mpvue.com]: http://mpvue.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 5]: /images/20220308/0369431eb9c34cd1b73ced2e411f1428.png
[https_github.com_tinajs_tina]: https://github.com/tinajs/tina
[https_github.com_Tencent_wepy]: https://github.com/Tencent/wepy%20%20%E5%AE%98%E7%BD%91%E5%9C%B0%E5%9D%80%EF%BC%9A
[https_tencent.github.io_wepy]: https://tencent.github.io/wepy
[https_github.com_wdfe_weweb]: https://github.com/wdfe/weweb
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70 6]: /images/20220308/7e6b1272a7024896907407c9475f8eaa.png
[https_jinaconvert.com_cn]: https://jinaconvert.com/cn/
[https_github.com_yingye_postcss-px2units]: https://github.com/yingye/postcss-px2units
[https_github.com_yingye_qcloud-upload]: https://github.com/yingye/qcloud-upload
[https_github.com_yingye_weapp-qrcode]: https://github.com/yingye/weapp-qrcode
[https_gitee.com_lisniuse_wxdad]: https://gitee.com/lisniuse/wxdad
[https_github.com_xiaolin3303_wx-charts]: https://github.com/xiaolin3303/wx-charts
[https_www.rhaphp.com]: https://www.rhaphp.com/
[http_www.jisuapp.cn]: http://www.jisuapp.cn/
[https_mp.weixin.qq.com_debug_wxadoc_dev_index.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html