小程序笔记

1、小程序常用标签

view（视图容器）、rich-text（富文本）、swiper（滑块视图容器）、icon（图标）、text（文字）、progress（进度条）、button（按钮）、form（表单）、input（输入框）、checkbox（多项选择器）、radio（单项选择器）、picker（列表选择器）、slider（滚动选择器）、switch（开关选择器）、textarea（多行输入框）、label（标签）、navigator（应用链接）、audio（音频）、image（图片）、video（视频）、camera（系统相机）、map（地图）、scroll-view（可滚动视图容器）、picker-view（内嵌列表选择器）、canvas（画布）movable-area（可移动区域）、movable-view（可移动的视图容器）、cover-view（覆盖视图）、cover-image（覆盖图片）、functional-page-navigator（跳转到插件功能页）、live-player（实时音视频播放）、live-pusher（实时音视频录制）

2、三元判断

　　模板引用

3、点击navigator中的子元素同时，防止跳转

　　需要把bindtab 改成 catchtap 即可

　　原理：bind的不会阻止事件冒泡（元素最里层到最外层函数执行），catch会阻止冒泡，只是冒泡到当前层结束

4、背景高斯虚化

.contain{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(https://img.d-arts.cn/doc_img/7132e0be4ca897f3afca11dc791acb241589124569.png) ;
  filter: blur(10rpx);
  -webkit-filter: blur(10rpx);
}

5、单页导航自定义

当前json页面配置   （如果不在app.json中进行路径引用版本更新之后这个属性会失效）

"navigationStyle":"custom"

6、tabbar跳转到不含tabbar页面

publish.js页面配置 （../../pages/publish/fabu 为需要跳转的页面。     ../../pages/index/index为返回页面 ）

Page({
  /**
   * 页面的初始数据
   */
  data: {
    num: 0,
  },
  onLoad: function() {},
  onShow: function() {
      this.data.num++;
      if (this.data.num % 2 == 0) {
          wx.switchTab({
              url: '../../pages/index/index'
          });
      } else {
          wx.navigateTo({
              url: '../../pages/publish/fabu'
          })
      }
  },  
})

7、实现点击框里的眼睛图标时密码显示与隐藏切换

wxml

<view class='parentstyle '>
    <view class='centerStyle'>
      <input password='{{passwordType}}' maxlength="20" placeholder="请输入密码" style='font-size:34rpx'></input>
      <image src='{{defaultType? "../../assets/closeye.png": "../../assets/openeye.png"}}' class='imageStyle' bindtap='eyeStatus'></image>
    </view>
</view>

Page({
  data: {
    defaultType: true,
    passwordType: true
  },
  //defaultType：眼睛状态   passwordType：密码可见与否状态
  eyeStatus: function(){
    this.data.defaultType= !this.data.defaultType
    this.data.passwordType= !this.data.passwordType
    this.setData({
      defaultType: this.data.defaultType,
      passwordType: this.data.passwordType
  })

  }

})

　转自 https://blog.csdn.net/weixin_45727040/article/details/106501412

8、时间选择组件 https://github.com/rover95/wxapp-timePicker

9、地区选择组件（https://www.jianshu.com/p/17ff5ec6fe61）

10、微信小程序勾选协议与提交按钮联动（https://blog.csdn.net/qq_44078389/article/details/104341129）

11、小程序日期带至今（https://blog.csdn.net/fly_666/article/details/103910334）

12、弹窗组件（https://github.com/DoubleZ1099/wxminiprogram-picker-master）

13、操作菜单（ wx.showActionSheet）

14、模态对话框（showModal）

15、消息提示（wx.showToast）

16、加载中（showLoading）

17、返回页面询问对话框（wx.enableAlertBeforeUnload）

18、导航自定义（https://github.com/lingxiaoyi/navigation-bar）

19、底部弹起的操作按钮组件（https://developers.weixin.qq.com/community/develop/article/doc/000e80884d4730aa4c2af0fa95b813）

20、富文本html渲染（https://github.com/jin-yufeng/Parser）

21、底部导航自定义（https://github.com/evenyao/wx-diy-tabbar）

22、评分（https://github.com/simsir-lin/wechat-miniprogram-rate）

23、时间（https://github.com/huanghaodong/wxminiprogram-pickerDate）

24、裁剪（https://github.com/we-plugin/we-cropper）

25、抽奖（https://github.com/chenxianqi/XCX-Luckdraw）有修改

5、海报生成 josn https://lingxiaoyi.github.io/painter-custom-poster/

6、海报生成插件 https://github.com/jasondu/wxa-plugin-canvas

小程序 swiper scroll-view 滚动

<scroll-view style="height: 100%;" scroll-y bindscroll="scroll" bindscrolltolower="reactBottom" scroll-with-animation scroll-top="{{scrollTop0}}px" class="container">

1、编辑器更新之后代码补全功能丢失

右下角的状态栏，关联的是xml语言

2、微信小程序-swiper轮播图圆角滑动会先直角再圆角的解决办法

在swpier样式设置上除了 ovewflow:hidden;border-radius:10rpx;还要再加上很重要的一个： transform: translateY(0);

3、小程序复选框改单选框（https://blog.csdn.net/weixin_30822451/article/details/95177030）

posted @ 2021-05-27 11:53 漫天风沙阅读(121) 评论(0) 编辑收藏举报

刷新页面返回顶部

小程序笔记

公告