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

背景

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

自定义组件的使用

  • 创建右键新建Component
  • 引用在你需要引用的文件的json中定义
"注释": "前面为组件名,后面为路径,这里仅供参考"

{
  "usingComponents": {
    "Menu": "../Components/Menu/Menu",
    "Loading": "../Components/Loading/Loading"
  }
}
  • 传入属性

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

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

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

然后在wxml中引用即可

<Menu theme="{{theme}}"></Menu>

一键换肤

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

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

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

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

之后在app.jsglobalData中定义一个字段储存你当前主题

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

然后在js里引用app.js,然后在onLoad里获取themesetData即可,这里贴上代码

<Menu theme="{{theme}}"></Menu>
<block wx:for="{{themeArr}}" wx:key="{{index}}">
  <view
    class="theme-view-item bg-{{item}} select-{{item == theme}}"
    bindtap=‘changeTheme‘
    data-theme="{{item}}"
  ></view>
</block>
.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
    })
  }
})

来个效果图

这里你也可以使用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()
},

这个点可以看官方文档

自适应

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

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

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

阻止事件冒泡

假设有如下结构

<view class=‘A‘ bindtap=‘funcA‘>
  <view class=‘B‘ bindtap=‘funcB‘></view>
</view>

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

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

<view class=‘A‘ bindtap=‘funcA‘>
  <view class=‘B‘ catchtap=‘funcB‘></view>
</view>

如何去掉Button的默认边框

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

button::after{
  border: none;
}

或者更改buttonposition让其不为relative

button{
    position: static;
}

小程序登录接入流程

一张图

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

您可能感兴趣的

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

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

原文地址:https://www.cnblogs.com/curationFE/p/weapp_tricks.html

时间: 05-13

你需要知道的小程序开发技巧的相关文章

微信小程序开发技巧总结(持续更新...)

小程序开发技巧总结 结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正. 数据的生命周期 1.短生命周期数据存储 以小程序启动到彻底关闭为周期的的数据建议存储在app.js文件夹中,引用app.js: const app =getApp(); 假设Value是在小程序本次生命周期中经常使用到的一个数据,比如说请求API的Token,动态的令牌等.那么就可以把这个值赋值到全局变量中去.实际上,并不是只有app.js中的glob

小程序开发另类小技巧 --用户授权篇

本文主要帮助大家解决部分功能接口二次授权+统一管理(包含对于wx对象的扩展)问题,例如获取地理位置信息,收获地址,录音等授权问题 小程序开发另类小技巧 --用户授权篇 getUserInfo较为特殊,不包含在本文范围内,主要针对需要授权的功能性api,例如:wx.startRecord,wx.saveImageToPhotosAlbum, wx.getLocation 原文地址:https://www.yuque.com/jinxuanzheng/gvhmm5/arexcn 仓库地址:https

@程序猿,你有一份小程序开发福利未领取!

只要关注第九程序官方微信公众号(djxcx9),@<微信小程序开发实战>图书一本哦!(详见文中活动规则!) "送书",就可获得参与活动链接! 奖品详情:这本书深入简出的介绍小程序的功能以及开发实战技巧!在上架不到半天的时间便被京东商城选为CTO 即日起至月日中午  关注第九程序公众号(),进入第九程序公众号,发送在微信文章底部留言说说示例:(送书)你对小程序开发的看法 截止到月日中午留言点赞数最高的前三名即可获得奖品.(为公平起见,第九程序将于月日中午截取留言区图片) 获奖

微信小程序开发优秀教程及文章合集第一期

我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列:微信小程序开发手记<一>:项目的代码结构微信小程序开发手记<二>:属性display微信小程序开发手记<三>:backgroud和border属性微信小程序开发手记<四>:视图容器微信小程序开发手记<五>:组件微信小程序开发手记<六>:API 艺龙系列:精品!艺龙小程序:开发项目遇到的问题以及解决方案:http://www.wxapp-unio

资讯 | 2018年1月15日微信公开课解读!微信小程序开发资源

引言:2018年1月15日 微信公开课PRO开课了,本次课时内容将涉及:小程序.智慧零售.企业微信.小游戏  (附学习参考资料) 为了快速理解「2018 微信公开课 PRO 版」上张小龙的一小时演讲内容,结合下午微信公开课课室A_B_C的课时安排,这里为大家提前整理了相应的小程序学习参考资料: 微信公开课pro_A课室(14:00-17:50) 主题:小程序产品能力.开发.应用及规则 一.如何开发一个优秀的微信小程序/小游戏 微信小程序官方工具  https://mp.weixin.qq.com

小程序开发中有趣的事情

小程序开发做了半年了,断断续续地利用课余时间写了一大部分. 期间遇到了很多坑和技巧,个人感觉十分有趣. 1.textarea 小程序里面的textarea是我遇到的第一个坑. textarea 在小程序里面看起来似乎和HTML里的一样,但是页面一滑动就有问题:欸欸欸??卧槽,卧槽,他怎么不动?:如果页面有弹层,弹层弹出的瞬间,卧槽卧槽?这个怎么在最上面?.textarea在小程序里面是原生层级最高的组件,z-index对他没用,并且在swipe.scroll-view.canve里面会出现奇奇怪

小程序+巧应用-微信小程序开发实战pdf

下载地址:网盘下载 系统全面地讲解微信小程序的开发技术.开篇创建一个小程序项目并解析体验,介绍如何由零开始创建一个小程序,全面体验小程序的开发工具.界面.开发框架.实现过程及其主要代码框架,了解小程序的应用场景及开发要求.接着介绍小程序开发基础,包括小程序开发的语言与语法.函数方法.模块.事件交互等.然后详细介绍了组件的应用与开发,包括开发过程与组件应用技巧,还详细分析了API接口,包括使用各个微信原生API接口进行小程序开发的技巧.最后介绍了几个小程序实战案例,让读者实践小程序各项能力的应用及

小程序开发总结一:mpvue框架及与小程序原生的混搭开发

mpvue-native:小程序原生和mpvue代码共存 问题描述 mpvue和wepy等框架是在小程序出来一段时间之后才开始有的,所以会出现的问题有:需要兼容已有的老项目,有些场景对小程序的兼容要求特别高的时候需要用原生的方式开发 解决思路 mpvue的入口文件导入旧版路由配置文件 公共样式 字体图标迁移 app.wxss -> app.vue中less(mpvue的公共样式) 旧项目导入 旧项目(native)拷贝到dist打包的根目录 这个要注意的就是拷贝的旧项目不能覆盖mpvue打包文件

小程序&#183;巧应用,微信小程序开发实战

系统全面地讲解微信小程序的开发技术.开篇创建一个小程序项目并解析体验,介绍如何由零开始创建一个小程序,全面体验小程序的开发工具.界面.开发框架.实现过程及其主要代码框架,了解小程序的应用场景及开发要求.接着介绍小程序开发基础,包括小程序开发的语言与语法.函数方法.模块.事件交互等.然后详细介绍了组件的应用与开发,包括开发过程与组件应用技巧,还详细分析了API接口,包括使用各个微信原生API接口进行小程序开发的技巧.最后介绍了几个小程序实战案例,让读者实践小程序各项能力的应用及掌握一些应用技巧.本