你需要知道的小程序开发技巧

谁借莪１个温暖的怀抱￠ 2022-05-25 13:15 240阅读 0赞

# 背景 #

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或`api`相关或其无法解决的需求，于是决定在这里小小的整理一下自己的实现(次序不分先后)

## 自定义组件的使用 ##

*  创建右键新建`Component`
 *  引用在你需要引用的文件的`json`中定义

"注释": "前面为组件名，后面为路径，这里仅供参考"
    
    {
      "usingComponents": {
        "Menu": "../Components/Menu/Menu",
        "Loading": "../Components/Loading/Loading"
      }
    }

*  传入属性

在组件的`js`中定义你需要的属性名,类型及默认值

properties: {
      theme: {
        type: String,
        value: 'gray'
      }
      ...
    },

> 注意`properties`为父组件要传入的数据，组件自身状态还是在`data`中

然后在`wxml`中引用即可

## 一键换肤 ##

先创建一个`color.wxss`来存你的皮肤样式(文件名和位置随意)

/* 黑色主题 */
    .bg-black{
      background-color: #363636;
    }
    .col-black-title{
      color: #ffffff;
    }
    .col-black-name{
      color: #c3c3c3;
    }

`class`名中必须带一个`标志`来区分不同主题，推荐使用颜色的英文名..然后在`app.wxss`中引用

// ~ 为你的文件路径
    @import '~/color.wxss';

之后在`app.js`的`globalData`中定义一个字段储存你当前主题

globalData: {
      themeArr: ['gray', 'black', 'green', 'orange', 'pink', 'blue'],
      theme: 'black' // gray, black, green, orange, pink, blue
    }

然后在js里引用`app.js`，然后在`onLoad`里获取`theme`后`setData`即可，这里贴上代码

.theme-view-item{
      width: 80rpx;
      height: 40rpx;
      margin: 20rpx;
      border-radius: 10rpx;
    }
    .select-true{
      transform: scale(1.2,1.2);
    }

var app = getApp()
    
    Page({
    
      data: {
        theme: '',
        themeArr: app.globalData.themeArr
      },
    
      onLoad: function (options) {
        this.setData({
          theme: app.globalData.theme
        })
      },
    
      changeTheme(e){
        var theme = e.currentTarget.dataset.theme
        app.globalData.theme = theme
        this.setData({
          theme: theme
        })
      }
    })

来个效果图

![16329289b34d7e41_imageslim][]

> 这里你也可以使用`storage`来保存`theme`

## 加载更多 ##

使用`scroll-view`

<scroll-view scroll-y bindscrolltolower='toLow' style="height: { {height}}px" >

`scroll-y`允许纵向滚动，`bindscrolltolower`定义了滚动到底部时应该执行的函数，`style`中使用了`js`中获取的屏幕可用高度

> 使用`scroll-y`需要指定`scroll`的高度

onLoad: function (options) {
      wx.getSystemInfo({
        success: (res) => {
          this.setData({
            height: res.windowHeight
          })
        }
      })
    },
    toLow(){
      this.setData({
        isLoading: true
      })
    },

然后在`scroll`下面放你的`loading`组件就可以了..

<scroll-view scroll-y bindscrolltolower='toLow' style="height: { {height}}px" >
      ......
      <view hidden="{ {!isLoading}}">
        <Loading></Loading>
      </view>
    </scroll-view>

## 下拉刷新 ##

这个功能用到的都是官方的`api`，先在`app.json`中定义允许下拉刷新

"window": {
      ......
      "enablePullDownRefresh": true
    }

然后在你的`js`文件中定义相应的函数

onPullDownRefresh: function () {
      ......
      wx.stopPullDownRefresh()
    },

这个点可以看[官方文档][Link 1]

## 自适应 ##

`rpx`单位是微信小程序中`css`的尺寸单位，`rpx`可以根据屏幕宽度进行自适应，如在 `iPhone6` 上，屏幕宽度为`375px`，共有`750`个物理像素，则`750rpx`= `375px` = `750`物理像素，`1rpx` = `0.5px` = `1`物理像素

> 如果不懂的话不用考虑太多，在用`px`的时候将其大小翻倍使用`rpx`即可

[【微信小程序】——rpx、px、rem等尺寸间关系浅析][rpx_px_rem]

## 阻止事件冒泡 ##

假设有如下结构

我们在`A`,`B`上定义了两个独立的点击事件，懂得事件冒泡的童鞋会发现，如果点击`B`的话，不仅会执行`funcB`还会执行`funcA`，那么如何避免这个问题?

很简单，只需要将不需要冒泡的的绑定函数改成`catchtap`

## 如何去掉Button的默认边框 ##

微信小程序里`button`的边框其实是写在`after`里的，可以在`after`中进行更改

button::after{
      border: none;
    }

或者更改`button`的`position`让其不为`relative`

button{
        position: static;
    }

## 小程序登录接入流程 ##

一张图

![1][]

[Fundebug][]提供JavaScript监控，支持所有主流前端框架，微信小程序监控，微信小游戏监控，后端Node.js监控。

![1386816-20180502112633892-1858746955.png][]

您可能感兴趣的

1.  [详解1000+项目数据分析出来的10大JavaScript错误][1000_10_JavaScript]  
    
2.  [10个用Console来Debug的高级技巧][10_Console_Debug]
3.  [Fundebug：小程序的运维中心][Fundebug 1]

作者：AddOneG  
链接：https://juejin.im/post/5af01041518825672a02d8af

[16329289b34d7e41_imageslim]: https://user-gold-cdn.xitu.io/2018/5/4/16329289b34d7e41?imageslim
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fpulldown.html%23onpulldownrefresh
[rpx_px_rem]: https://link.juejin.im?target=http%3A%2F%2Fwww.cnblogs.com%2Ffayin%2Fp%2F6346754.html
[1]: https://user-gold-cdn.xitu.io/2018/5/4/16329289b33c027f?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[Fundebug]: https://www.fundebug.com/
[1386816-20180502112633892-1858746955.png]: /images/20220525/5e335b58923748e58ff2dedce81bea04.png
[1000_10_JavaScript]: https://blog.fundebug.com/2018/03/12/top-10-javascript-errors-from-1000-projects/
[10_Console_Debug]: https://blog.fundebug.com/2018/03/19/10-tips-for-debugging-with-console/
[Fundebug 1]: https://blog.csdn.net/qq_40126542/article/details/80112657