微信小程序代码记录

已于 2024-01-14 00:42:08 修改
阅读量1.7k 收藏 12
点赞数 3
文章标签： 微信小程序 小程序
于 2022-11-19 00:08:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zlart/article/details/127931659
版权

css命名

https://github.com/Tencent/tdesign-common/blob/main/css-naming.md

界面设置

页面标题

json

{
  "usingComponents": {},
  "navigationBarTitleText": "库存搜索",
  "navigationBarBackgroundColor": "#9D1117",
  "navigationBarTextStyle":"white"
}

页面标题镂空

json

{
  "usingComponents": {},
  "navigationBarTitleText": "库存搜索",
  "navigationStyle": "custom"
}

循环判断

循环

wx:for="{{firstRow}}" wx:key="id" wx:for-item="item"

是否显示

wx:if="{{false}}"
wx:if="{{true}}"

三种状态判断显示

<block wx:if="{{true}}"> </block>
<block wx:elif="{{true}}"> </block>
<block wx:else> </block>

样式三元判断

<view class="start-btn {{isRunning?'start-on':'start-off'}}" bindtap="startGame">START</view>

跳转页面

导航栏页面的跳转

<navigator url="../kehulist/kehulist" open-type="switchTab" class="xidi-buts-item"><text>取消</text></navigator>

普通跳转

<navigator url="../kehulist/kehulist" open-type="navigate" hover-class="none" class="xidi-buts-item"><text>取消</text></navigator>

筛选页面跳转 wx.navigateTo

toFilter: function () {
    wx.navigateTo({
      url: '../genjinfilter/genjinfilter?key=1',
    })
  },

返回上一页面

wx.navigateBack({
  delta: 2
})

常用CSS

选择最后一个之外的

css


.radio-item:not(:last-child) {
  margin-right: 20rpx;
}

一行文字超出打点

css

.dizhi-info .shiqu_txt {
  max-width: 300rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
}

投影样式

效果
在这里插入图片描述
css

.form-wrap {
  background-color: #ffffff;
  padding: 10rpx;
  margin: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.10);
}

渐变色背景

渐进效果
在这里插入图片描述
css

background-image: linear-gradient(90deg, #FFEBDE 30%, #ffffff);

断崖效果
在这里插入图片描述
css

background: linear-gradient(180deg, #F8C859 150px, #FAFAFA 150px);

视频播放按钮

效果
在这里插入图片描述
css

.play-but {
	display: flex;
	align-items: center;
	justify-content: center;
	content: '';
	width: 100rpx;
	height: 100rpx;
	border: #ffffff solid 2rpx;
	border-radius: 100rpx;
}

.play-but::after {
	content: '';
	width: 0rpx;
	height: 0rpx;
	border-width: 20rpx;
	border-style: solid;
	border-color: transparent #ffffff transparent transparent;
	transform: rotate(180deg);
	margin-left: 35rpx;
}

wxml

<view class="play-icon">
	<view class="play-but"></view>
</view>

字体图标

css引用
base64引用法

/* 字体图标 */
@font-face {
  font-family: "iconfont";
  src: url('这里贴上base64代码') format('woff2')
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-trust:before {
  content: "\e76b";
}

用法


<text class="iconfont icon-training"></text></view>

base64代码获取
1,访问图标项目的 css
在这里插入图片描述

2,复制base64代码（更新图标项目之后，需要重新获取）
在这里插入图片描述

资源


图标项目首页：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.3

效果
在这里插入图片描述

图片image

icon图标

效果
在这里插入图片描述
用法

<view class="icon-img">
      <image src="../../images/chang-city.png" mode="aspectFit"/>
    </view>

aspectFit 说明

缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

头像、标题图、轮播图

效果
在这里插入图片描述
用法

<image mode="aspectFill" src="../../images/mendian001@2x.png"></image>

aspectFill 说明

保持纵横比缩放图片，只保证图片的短边能完全显示出来`

详情图

效果
在这里插入图片描述

用法

 <image mode="widthFix" src="{{item}}"></image>

aspectFill 说明

缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

内容图

效果
在这里插入图片描述

用法

<image mode="aspectFill" src="../../images/mendian001@2x.png"></image>

aspectFill 说明

保持纵横比缩放图片，只保证图片的短边能完全显示出来`

背景图

效果
在这里插入图片描述
用法

<!-- 背景图片 -->
<view class="dati-plane">
  <image class="dati-bg-img dati-bg-1" src="https://dati-1251106769.cos.ap-nanjing.myqcloud.com/dati001.png"
    mode="aspectFill">
  </image>
</view>
<!-- 背景图片 -->

aspectFill 说明

保持纵横比缩放图片，只保证图片的短边能完全显示出来。

css

.dati-plane {
  position: fixed;
  width: 100%;
  height: 100%;
}

.dati-bg-img {
  display: block;
  width: 750rpx;
  height: 100%;
}

图片预览

效果
在这里插入图片描述

wxml

<view class="imglist-choose-box">
        <!-- 图片预览 -->
        <block wx:if="{{imageList.length != 0}}">
          <view class="imglist-item" wx:for="{{imageList}}" wx:key="*this" wx:for-item="image">
            <image mode="aspectFill" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
            <view class="delete-tag" catchtap="deleteImage" data-index="{{index}}">
              <text></text>
            </view>
          </view>
        </block>
        <!-- 图片预览 -->
      </view>

css

保持纵横比缩放图片，只保证图片的短边能完全显示出来。

data

// 图片预览
    imageList: ['http://www.mylhh.com/mylhh/user/skin/scroller/20220101001.png', 'http://www.mylhh.com/mylhh/user/skin/scroller/20221012001.png'],

js

 // 预览图片
  previewImage: function (e) {
    const current = e.target.dataset.src
    wx.previewImage({
      current,
      urls: this.data.imageList
    })
  },
  // 预览图片

视频

video

效果
在这里插入图片描述

用法


<video class="video-bg-img"
      poster="https://1251106769.vod2.myqcloud.com/8ccb2785vodgzp1251106769/9df193aa5285890816016256328/5285890816016550025.png"
      src="https://1251106769.vod2.myqcloud.com/40f2ca2dvodtransgzp1251106769/9df193aa5285890816016256328/adp.10.m3u8"
      id="myVideo" loop="{{true}}" show-mute-btn="{{true}}" controls="{{false}}" autoplay="{{true}}"
      enable-auto-rotation="{{true}}"></video>

说明


show-mute-btn 是否显示静音按钮
loop 是否循环播放
enable-auto-rotation 开启手机横屏时自动全屏
autoplay 是否自动播放
controls 是否显示默认播放控件

按钮

按钮套件


/* ui-button */
.ui-button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #9D1117;
  border: #9D1117 solid 1px;
  color: #fff;
  border-radius: 10rpx;
  line-height: 90rpx;
  box-sizing: border-box;
}

/* .ui-button  */
.ui-button .iconfont {
  font-size: 45rpx;
  margin-right: 10rpx;
}

/* .ui-button-info */
.ui-button-info {
  color: #909399;
  background: #f4f4f5;
  border-color: #d3d4d6;
}

/* ui-button-delete */
.ui-button-delete {
  background-color: #ffffff;
  color: #333333;
  border: #DEDEDE solid 1px;
}

/* ui-button-primary */
.ui-button-primary {
  background-color: #9D1117;
  color: #ffffff;
}

/* ui-button-line */
.ui-button-line {
  background-color: transparent;
  border: #9D1117 solid 1px;
  color: #9D1117;
}

/* ui-button-copy */
.ui-button-copy {
  background-color: #EDF4FF;
  border: #74A9FF solid 1px;
  color: #2E7CFF;
  line-height: 50rpx;
  width: 100rpx;
  font-size: 24rpx;
}

按钮组


/* 按钮组 */
.ui-button-group {
  padding: 20rpx;
  display: flex;
  align-items: center;
}

.ui-button-group .ui-button:nth-child(2) {
  flex: 2;
  margin-left: 20rpx;
}

.ui-button-group .ui-button:nth-child(1) {
  flex: 1;
}

悬浮操作按钮

效果
在这里插入图片描述

用法


<!-- 悬浮按钮2 -->
<view class="ui-float-box">
  <view class="ui-float-but" bindtap="toFilter" data-url="../sjadd/sjadd"><text class="iconfont icon-add-select"></text></view>
</view>
<!-- 2悬浮按钮2 -->

css


/* 悬浮按钮2 */
.ui-float-box {
  position: fixed;
  right: 40rpx;
  bottom: 60rpx;
}

.ui-float-but {
  background-color: #9D1117;
  border-radius: 100%;
  width: 90rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-float-but .iconfont {
  color: #ffffff;
  font-size: 65rpx;
}
/* 悬浮按钮2 */

按钮组件

重置效果
在这里插入图片描述

用法


<view class="share-item share-wx">
          <button open-type="share">
            <text class="iconfont icon-iconfont16x16moban"></text>
            <view>微信好友</view>
          </button>
        </view>

重置css


.share-group button:not([size='mini']) {
  width: 100%;
  padding: 0;
  line-height: initial;
  font-size: initial;
  font-weight: normal;
  background-color: transparent;
  color: #9D9D9D;
}

基本按钮

效果
在这里插入图片描述

用法


<view class="ui-button-group">
     <view class="ui-button">确认到访</view>
</view>

css


/* ui-button */
.ui-button {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2E7CFF;
  border: #2E7CFF solid 1px;
  color: #fff;
  border-radius: 10rpx;
  line-height: 90rpx;
  box-sizing: border-box;
}

轻按钮

效果
在这里插入图片描述
用法

<view class="ui-button-group">
     <view class="ui-button ui-button-delete">确认到访</view>
</view>

css


.ui-button-line {
  background-color: #ffffff;
  border: #2E7CFF solid 1px;
  color: #2E7CFF;
}

弱按钮

效果
在这里插入图片描述

css


/* ui-button-delete */
.ui-button-delete {
  background-color: #ffffff;
  color: #333333;
  border: #DEDEDE solid 1px;
}

复制按钮

效果
在这里插入图片描述

css


.ui-button-copy {
  background-color: #EDF4FF;
  border: #74A9FF solid 1px;
  color: #2E7CFF;
  line-height: 50rpx;
  width: 100rpx;
  font-size: 24rpx;
}

成功按钮

效果
在这里插入图片描述
用法

<view class="ui-button-group">
        <view class="ui-button ui-button-info">拒绝</view>
        <view class="ui-button ui-button-primary">同意到访</view>
      </view>

css

/* .ui-button-info */
.ui-button-info {
  color: #909399;
  background: #f4f4f5;
  border-color: #d3d4d6;
}
/* ui-button-primary */
.ui-button-primary {
  background-color: #EDF4FF;
  color: #2E7CFF;
}

吸底按钮

效果
在这里插入图片描述
用法

<!-- ui-affix -->
<view class="ui-affix-block"></view>
<view class="ui-affix">
  <view class="ui-button-group">
    <view bindtap="testModal" data-key="拒绝" data-tip="访客将会收系统发送的申请失败通知。" class="ui-button ui-button-delete">拒绝
    </view>
    <view bindtap="testModal" data-key="同意到访" data-tip="访客将会收系统发送的预约成功通知。" class="ui-button ui-button-primary">同意到访
    </view>
  </view>
</view>

css

/* 吸底 */
.ui-affix-block {
  height: 150rpx;
}
.ui-affix {
  background-color: #fff;
  position: fixed;
  width: 100%;
  bottom: 0rpx;
  border-top: #EAEAEA solid 1px;
  z-index: 3;
}

不吸底

用法

<!-- ui-affix-no -->
<view class="ui-affix-no">
  <view class="ui-button-group">
    <view class="ui-button ui-button-delete">删除</view>
    <view class="ui-button ui-button-primary" bindtap="toFilter" data-url="../sjprofile/sjprofile">保存</view>
  </view>
</view>

css

/* 不吸底 */
.ui-affix-no .ui-button-group {
  display: block;
  border-top: #F5F5F5 solid 1px;
}

.ui-affix-no .ui-button-group .ui-button:nth-child(2) {
  margin-left: 0;
}

.ui-affix-no .ui-button-group .ui-button:not(:first-child) {
  margin-top: 20rpx;
}

按钮动效

用法

/* 按钮动画 */
.start-on {
  animation: animat 1.1s infinite;
}
@keyframes animat {
  0% {
    transform: scale(.9);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(.9);
  }
}

页面提示

暂无数据

效果
在这里插入图片描述

用法


<!-- 暂无数据 -->
<block wx:if="{{true}}">
  <view class="ui-msg">
    <view class="ui-msg-icon">
      <text class="iconfont icon-icon_nomemo"></text>
      <view class="ui-msg-tit">暂无记录</view>
    </view>
  </view>
</block>
<!-- 暂无数据 -->

css


/* 暂无数据 ui-msg */
.ui-msg {
  padding-top: 50rpx;
  padding-bottom: 50rpx;
  text-align: center;
}
.ui-msg-icon {
  font-size: 28rpx;
  color: #9D9D9D;
}
.ui-msg-icon .iconfont {
  font-size: 80rpx;
  color: #B2B2B2;
  margin-bottom: 40rpx;
}
/* 暂无数据 ui-msg */

Tab切换

一行tab

效果
在这里插入图片描述

用法

<view class="ui-tab">
  <view class="ui-tab-item {{1==TabCur?'cur':''}}" bindtap="tabSelect" data-id="1">全部</view>
  <view class="ui-tab-item {{2==TabCur?'cur':''}}" bindtap="tabSelect" data-id="2">审核中</view>
  <view class="ui-tab-item {{3==TabCur?'cur':''}}" bindtap="tabSelect" data-id="3">预约成功</view>
  <view class="ui-tab-item {{4==TabCur?'cur':''}}" bindtap="tabSelect" data-id="4">已完成</view>
</view>

css

/* ui-tab */
.ui-tab {
  padding: 20rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
}

.ui-tab .ui-tab-item {
  position: relative;
  padding: 10rpx;
}

.ui-tab .cur {
  color: #2E7CFC;
  font-weight: bold;
}

.ui-tab .cur::before {
  content: " ";
  display: inline-block;
  height: 4rpx;
  width: 40rpx;
  background-color: #2E7CFC;
  position: absolute;
  left: 50%;
  margin-left: -20rpx;
  bottom: 0;
}
/* ui-tab */

data

// tab选项卡默认值
    TabCur: 1,

js

  //tab切换
  tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id
    })
  },
  //tab切换

列表

历史记录

效果
在这里插入图片描述

用法


<view class="ui-list-item">
        <view class="ui-list-info" bindtap="historyTyping" data-key="张无忌">张无忌</view>
        <view class="iconfont icon-icon_roundclose" data-test="删除此条搜索记录" bindtap="test"></view>
      </view>

css


/* .ui-list */
.ui-list .ui-list-item {
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20rpx;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: #F0F0F0 solid 1px;
}

.ui-list .ui-list-item:last-child {
  padding-bottom: 0rpx;
  margin-bottom: 0rpx;
  border-bottom: none;
}

.ui-list .ui-list-item .ui-list-info {
  flex: 1;
}

.ui-list .ui-list-info .txt-h {
  font-size: 28rpx;
}

.ui-list .ui-list-info .txt-p {
  font-size: 24rpx;
  color: #9D9D9D;
}

.ui-list .ui-list-item .iconfont {
  color: #B2B2B2;
}

通讯录列表

效果
在这里插入图片描述

用法


<!-- 通讯录列表 -->
<view class="ui-list">
  <view class="ui-list-item" bindtap="testDialog" data-key="张无忌4">
    <view class="ui-list-avatar">
      <image mode="aspectFill" src="../../images/xt001.png"></image>
    </view>
    <view class="ui-list-info">
      <view class="txt-h">张无忌</view>
      <view class="txt-p">营销代表</view>
    </view>
  </view>
</view>
<!-- 通讯录列表 -->

css


.ui-list .ui-list-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  margin-right: 20rpx;
}

.ui-list .ui-list-avatar image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

描述列表

效果
在这里插入图片描述

用法


<view class="ui-descr">
        <view class="ui-descr-item">
          <view class="ui-descr-label">访客姓名</view>
          <view class="ui-descr-content">林煜 <text>150****8247</text></view>
        </view>
        <view class="ui-descr-item">
          <view class="ui-descr-label">访客单位</view>
          <view class="ui-descr-content">武汉藏龙岛星巴克</view>
        </view>
        <view class="ui-descr-item">
          <view class="ui-descr-label">到访日期</view>
          <view class="ui-descr-content">2021-05-12（周四）14:30</view>
        </view>
        <view class="ui-descr-item">
          <view class="ui-descr-label">拜访员工</view>
          <view class="ui-descr-content">张三丰 <text>销售代表</text></view>
        </view>
        <view class="ui-descr-item">
          <view class="ui-descr-label">备注</view>
          <view class="ui-descr-content">来送咖啡豆的</view>
        </view>
      </view>

css


/* 描述列表 .ui-descr */
.ui-descr .ui-descr-item {
  font-size: 28rpx;
  display: flex;
  align-items: center;
  padding-bottom: 6rpx;
  margin-bottom: 6rpx;
}

.ui-descr .ui-descr-item:last-child {
  padding-bottom: 0rpx;
  margin-bottom: 0rpx;
}

.ui-descr .ui-descr-label {
  color: #9D9D9D;
  width: 130rpx;
}

.ui-descr-content text {
  color: #9D9D9D;
}

/* 描述列表 .ui-descr */

箭头

效果
在这里插入图片描述

用法

css


/* ui-arrow-flex */
.ui-arrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ui-arrow */
.ui-arrow:after {
  content: " ";
  display: inline-block;
  height: 15rpx;
  width: 15rpx;
  border-width: 4rpx 4rpx 0 0;
  border-color: #b2b2b2;
  border-style: solid;
  -webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
  transform: matrix(.71, .71, -.71, .71, 0, 0);
  margin-left: 10rpx;
}

卡片

简单卡片

效果
在这里插入图片描述
用法

<view class="ui-card">
    <view class="ui-card-header">
      <view class="ui-card-user">
        <image class="card-user-image" mode="aspectFill" src="/images/070602.png"></image>
        <view class="card-user-text">
          <view>小林</view>
          <text>2020-04-18 22:06:16</text>
        </view>
      </view>
      <view class="ui-card-status">
        <view>面试</view>
      </view>
    </view>
    <view class="ui-card-body ui-arrow">
      <view class="ui-descr">
        <view class="ui-descr-item">
          <view class="ui-descr-label">访客姓名</view>
          <view class="ui-descr-content">林煜 <text>150****8247</text></view>
        </view>
        <view class="ui-descr-item">
          <view class="ui-descr-label">到访日期</view>
          <view class="ui-descr-content">2021-05-12（周四）14:30</view>
        </view>
        <view class="ui-descr-item">
          <view class="ui-descr-label">拜访员工</view>
          <view class="ui-descr-content">张三丰 <text>销售代表</text></view>
        </view>
        <view class="ui-descr-item">
          <view class="ui-descr-label">备注</view>
          <view class="ui-descr-content">来送咖啡豆的</view>
        </view>
      </view>
    </view>
    <view class="ui-card-footer">
      <view class="ui-button-group">
        <view class="ui-button ui-button-info">拒绝</view>
        <view class="ui-button ui-button-primary">同意到访</view>
      </view>
    </view>
  </view>

css

/* 基础卡片 */
/* ui-card */
.ui-card {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.10);
  margin-bottom: 20rpx;
}

/* ui-card-header */
.ui-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  line-height: 1;
  padding: 30rpx 30rpx;
  border-bottom: #F0F0F0 solid 1px;
}

.ui-card-header .ui-card-user {
  display: flex;
  flex: 1;
  align-items: center;
}

.ui-card-header .card-user-text {
  margin-left: 0rpx;
}

.ui-card-header .card-user-text view {
  margin-bottom: 6rpx;
}

.ui-card-header .card-user-text text {
  color: #999999;
  font-size: 24rpx;
}

.ui-card-footer {
  padding: 20rpx 30rpx;
  border-radius: 0rpx 0rpx 20rpx 20rpx;
  background-color: #F7F7F7;
  font-size: 28rpx;
  color: #999999;
}

/* item-status-con */
.ui-card-status {
  text-align: right;
  color: #2E7CFC;
}
/* ui-card-body */
.ui-card-body {
  padding: 30rpx;
}
/* 基础卡片 */

自定义弹窗

底部弹出窗口

效果
在这里插入图片描述

用法

<view class="shop-fot" bindtap="showModal" data-target="bottom">
      <text class="iconfont icon-share"></text>
      <view>分享</view>
    </view>

wxml

<!-- 自定义弹出窗口-底部弹出 -->
<view class="basic-modal bottom {{basicModal=='bottom'?'show':''}}" catchtouchmove="true">
  <view class="basic-dialog">
    <view class="basic-dialog-head">
      <view class="basic-tit">分享到</view>
      <view class="basic-tit-hide" bindtap="hideModal"></view>
    </view>
    <view class="basic-dialog-con">
      <view class="share-group">
        <view class="share-item share-wx">
          <button open-type="share">
            <text class="iconfont icon-iconfont16x16moban"></text>
            <view>微信好友</view>
          </button>
        </view>
        <view class="share-item  share-img" bindtap="renderToCanvas" data-target="haibao">
          <text class="iconfont icon-pic-fill"></text>
          <view>生成海报</view>
        </view>
      </view>
    </view>
    <view class="basic-dialog-fot">
      <view class="basic-fot-hide" bindtap="hideModal">取消</view>
    </view>
  </view>
</view>
<!-- 自定义弹出窗口-底部弹出 -->

css


/* 自定义弹窗 */
/* bg */
.basic-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1110;
  opacity: 0;
  background: rgba(0, 0, 0, 0.75);
  outline: 0;
  backface-visibility: hidden;
  perspective: 2000rpx;
  transition: all 0.3s ease-in-out 0s;
  pointer-events: none;
}

/* 显示bg */
.basic-modal.show {
  opacity: 1;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
}

/* 显示body */
.basic-modal .basic-dialog {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}

/* pro-dialog-head */
.basic-dialog-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 25rpx 40rpx 40rpx;
}

.basic-dialog-head .basic-tit {
  font-size: 40rpx;
  font-weight: 700;
}

/* 取消按钮 */
.basic-dialog-head .basic-tit-hide {
  width: 36rpx;
  height: 36rpx;
  background-color: #ffffff;
  padding: 15rpx;
}

.basic-dialog-head .basic-tit-hide:after,
.basic-dialog-head .basic-tit-hide:before {
  background-color: #404041;
  content: '';
  display: block;
  height: 4rpx;
}

.basic-dialog-head .basic-tit-hide:after {
  transform: translateY(10rpx) rotate(135deg);
}

.basic-dialog-head .basic-tit-hide:before {
  transform: translateY(14rpx) rotate(-135deg);
}

/* sku-dialog-fot */
.basic-dialog-fot {
  border-top: #F5F5F5 solid 1px;
  padding: 20rpx;
  text-align: center;
}

/* 居中-外布局 */
.basic-modal.center {
  transform: scale(1.185);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 居中-显示 */
.basic-modal.center.show {
  transition-duration: 0.3s;
  -ms-transform: scale(1);
  transform: scale(1);
}

/* 居中-内布局 */
.basic-modal.center .basic-dialog {
  width: 680rpx;
  max-width: 100%;
  border-radius: 10rpx;
  overflow: hidden;
}
/* 顶部 */
/* 顶部-外布局 */
.basic-modal.top {
  margin-top: -1000rpx;
}

.basic-modal.top.show {
  margin-top: 0;
}
/* 顶部-内布局 */
.basic-modal.top .basic-dialog {
  border-radius: 0rpx 0rpx 20rpx 20rpx;
  position: absolute;
  width: 100%;
  top: 0rpx;
  z-index: 1111;
}

/* 底部 */
/* 底部-外布局 */
.basic-modal.bottom {
  margin-bottom: -1000rpx;
}

.basic-modal.bottom.show {
  margin-bottom: 0;
}

/* 底部-内布局 */
.basic-modal.bottom .basic-dialog {
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  position: absolute;
  width: 100%;
  bottom: 0rpx;
  z-index: 1111;
}

/* 居中海报-外布局 */
.basic-modal.haibao {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 居中海报-显示 */
.basic-modal.haibao.show {
  transition-duration: 0.3s;
}

/* 居中海报-内布局 */
.basic-modal.haibao .basic-dialog {
  max-width: 100%;
  border-radius: 10rpx;
  background-color: transparent;
}

.basic-modal.haibao .basic-dialog .basic-dialog-head {
  padding: 0rpx;
  position: relative;
  display: block;
}

.basic-modal.haibao .basic-dialog-head .basic-tit-hide {
  background-color: transparent;
  position: absolute;
  right: -50rpx;
  top: -50rpx;
  border: #ffffff solid 1px;
  border-radius: 50rpx;
  padding: 8rpx;
}

.basic-modal.haibao .basic-dialog-head .basic-tit-hide:after,
.basic-modal.haibao .basic-dialog-head .basic-tit-hide:before {
  background-color: #ffffff;
}

.basic-modal.haibao .basic-dialog-fot {
  border-top: none;
}

.basic-modal.haibao .basic-fot-hide {
  background-color: #FF6200;
  color: #ffffff;
  display: block;
  padding: 20rpx;
  margin: 0rpx 40rpx;
  border-radius: 80rpx;
}

js


//自定义弹窗 显示pro
  showModal: function (e) {
    const target = e.currentTarget.dataset.target;
    console.log(target);
    this.setData({
      target,
      basicModal: target
    });
  },
  // 自定义弹窗 隐藏pro
  hideModal: function (e) {
    var that = this;
    let target = that.data.target;
    this.setData({
      basicModal: false,
    })
  },

顶部弹出窗口

效果
在这里插入图片描述

用法


<view bindtap="showModal" data-target="top" class="todo-search">
      <text class="iconfont icon-icon_search"></text>筛选
    </view>

wxml


<!-- 自定义弹出窗口-顶部弹出 -->
<view class="basic-modal top {{basicModal=='top'?'show':''}}" catchtouchmove="true">
  <view class="basic-dialog">
    <view class="basic-dialog-head">
      <view class="basic-tit">请选择筛选条件</view>
      <view class="basic-tit-hide" bindtap="hideModal"></view>
    </view>
    <view class="basic-dialog-con">
      <view class="filter-plane">
        <view class="filter-row">
          <view class="filter-title">日期</view>
          <view class="filter-body">
            <!--  -->
            <view class="filter-data-con">
              <view class="filter-date">
                <picker mode="date" value="{{date_star}}" start="2015-09-01" end="2040-08-01"
                  bindchange="bindDateChange_star">
                  <view class="filter-date-input">{{date_star}}</view>
                </picker>
              </view>
              <view class="filter-date">到</view>
              <view class="filter-date">
                <picker mode="date" value="{{date_end}}" start="2015-09-01" end="2040-08-01"
                  bindchange="bindDateChange_end">
                  <view class=".filter-date-input">{{date_end}}</view>
                </picker>
              </view>
            </view>
            <!--  -->
            <view class="filter-key-list">
              <text class="filter-key" data-test="直接改变上面日期起始" bindtap="test">今日</text><text
                class="filter-key filter-key-cur" data-test="直接改变上面日期起始" bindtap="test">昨日</text><text
                class="filter-key" data-test="直接改变上面日期起始e" bindtap="test">本周</text><text class="filter-key"
                data-test="点击条件" bindtap="test">上周</text><text class="filter-key" data-test="点击条件"
                bindtap="test">本月</text><text class="filter-key" data-test="点击条件" bindtap="test">上月</text><text
                class="filter-key" data-test="点击条件" bindtap="test">本年</text>
            </view>
          </view>
        </view>
        <view class="filter-row">
          <view class="filter-title">状态</view>
          <view class="filter-body">
            <view class="filter-key-list">
              <text class="filter-key" data-test="点击条件" bindtap="test">待处理</text><text class="filter-key"
                data-test="点击条件" bindtap="test">已同意</text><text class="filter-key filter-key-cur" data-test="点击条件"
                bindtap="test">已到访</text><text class="filter-key" data-test="点击条件" bindtap="test">已过期</text><text
                class="filter-key" data-test="点击条件" bindtap="test">已拒绝</text>
            </view>
          </view>
        </view>
      </view>
      <!--  -->
    </view>
    <view class="basic-dialog-fot">
      <view class="ui-button-group">
        <view bindtap="exit" class="ui-button ui-button-delete">取消</view>
        <view class="ui-button">确认</view>
      </view>
    </view>
  </view>
</view>
<!-- 自定义弹出窗口-顶部弹出 -->

居中弹出窗口

效果
在这里插入图片描述

用法


<view class="shop-fot" bindtap="showModal" data-target="center">
      <text class="iconfont icon-share"></text>
      <view>分享</view>
    </view>

wxml


<!-- 自定义弹出窗口-居中弹出 -->
<view class="basic-modal center {{basicModal=='center'?'show':''}}" catchtouchmove="true">
  <view class="basic-dialog">
    <view class="basic-dialog-head">
      <view class="basic-tit">分享到</view>
      <view class="basic-tit-hide" bindtap="hideModal"></view>
    </view>
    <view class="basic-dialog-con">
      <view class="share-group">
        <view class="share-item share-wx">
          <button open-type="share">
            <text class="iconfont icon-iconfont16x16moban"></text>
            <view>微信好友</view>
          </button>
        </view>
        <view class="share-item  share-img">
          <text class="iconfont icon-pic-fill"></text>
          <view>生成海报</view>
        </view>
      </view>
    </view>
    <view class="basic-dialog-fot">
      <view class="basic-fot-hide" bindtap="hideModal">取消</view>
    </view>
  </view>
</view>
<!-- 自定义弹出窗口-居中弹出 -->

海报居中弹出窗口

效果
在这里插入图片描述

用法


<view class="share-item  share-img" bindtap="renderToCanvas" data-target="haibao">
          <text class="iconfont icon-pic-fill"></text>
          <view>生成海报</view>
        </view>

wxml


<!-- 自定义弹出窗口-海报-弹出 -->
<view class="basic-modal haibao {{basicModal=='haibao'?'show':''}}" catchtouchmove="true">
  <view class="basic-dialog">
    <view class="basic-dialog-head">
      <view class="basic-tit-hide" bindtap="hideModal"></view>
    </view>
    <view class="basic-dialog-con">
      <view class="wxml-canvas">
        <wxml-to-canvas width="300" height="433" class="widget"></wxml-to-canvas>
      </view>
    </view>
    <view class="basic-dialog-fot">
      <view class="basic-fot-hide" bindtap="extraImage">保存图片</view>
    </view>
  </view>
</view>
<!-- 自定义弹出窗口-海报-弹出 -->

交互动效

更多操作菜单

效果
用法
js


// 更多操作菜单 showActionSheet
  caoZuo: function (e) {
    wx.showActionSheet({
      itemList: ['查看客户资料', '编辑', '删除'],
      success(res) {
        console.log(res.tapIndex)
      },
      fail(res) {
        console.log(res.errMsg)
      }
    })
  },

手风琴

效果
用户


<view class=" ui-card">
    <view bind:tap="kindToggle" id="{{0}}"  class="ui-card-header {{openlist[0] ? 'card-show' : 'card-hide'}} ui-arrow">
      <view class="ui-card-title">
        <view class="hrda-card-tit">基础信息</view>
        <view class="hrda-card-action">编辑</view>
      </view>
    </view>
    <view wx:if="{{openlist[0]}}" class="ui-card-body">
      1
    </view>
  </view>

js


  data: {
    openlist: [true, true, true, true, true, true, true, true, true, true, true, true],
  },
  kindToggle(e) {
    const id = e.currentTarget.id
    const openlist = this.data.openlist
    this.setData({
      [`openlist[${id}]`]: !this.data.openlist[`${id}`],
    })
  },

拨打电话

效果

用法

<view bindtap="daDianhua" data-haoma="15010828247" class="ui-button  ui-button-copy">拨打</view>

js

  // 拨打电话 dataset 传值
  daDianhua: function (e) {
    const haoma = e.currentTarget.dataset.haoma;
    console.log(haoma);
    wx.makePhoneCall({
      phoneNumber: haoma, //dataset 传值
      success: function () {
        console.log('确定')
      },
      fail: function () {
        console.log('取消')
      }
    })
  },
  // 拨打电话 dataset 传值

微信弹出组件

效果
在这里插入图片描述

用法


<view bindtap="popup" data-position="bottom" class="tongyi-tip f-c-s">
  <view class="link-success f-c-c">
    <text class="iconfont icon-seleted"></text>
  </view> 确认已阅读并同意 <text class="link-txt">《参展须知》</text>
</view>

<!-- 弹出微信组件 page-container -->

<page-container show="{{show}}" round="{{true}}" overlay="{{true}}" duration="300" position="{{position}}"
  bindenter="onEnter" bindafterenter="afterEnter" custom-style="{{customStyle}}">
  <view class="ui-page">
    <view class="ui-page-body">
      <view class="ui-page-head">
        <view class="pop-tit">请填写拜访员工手机号</view>
        <view class="pop-exit" bindtap="exit"></view>
      </view>
      <view class="pop-body">
        <view class="fangke-usre-form">
          <view class="form-item">
            <view class="input-cell">
              <input focus="{{focus}}" class="form-input" type="number" value="{{inputVal}}" cursor-spacing="100"
                placeholder="请输入拜访员工手机号码" />
            </view>
            <view class="button-cell">
              <button bindtap="test" data-test="先判断为空，再提示加载，有的话提示成功" class="ui-button">确定</button>
            </view>
          </view>
        </view>
        <!-- 历史记录 -->
        <view class="search-history" wx:if="{{true}}">
          <view class="search-history-title">历史拜访员工</view>
          <view class="search-history-con">
            <!--  -->
            <view class="search-key"><text bindtap="historyTyping" data-key="15010828247">15010828247（林*）</text><text
                class="iconfont icon-icon_roundclose" data-test="删除此条记录" bindtap="test"></text></view>
            <!--  -->
          </view>
        </view>
        <!-- 历史记录 -->
      </view>
    </view>
  </view>
</page-container>

css


/* ui-page */
.ui-page {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-page-body {
  flex: 1;
  padding-bottom: 20rpx;
}

.ui-page-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 25rpx 40rpx 40rpx;
}

.ui-page-head .pop-tit {
  font-size: 40rpx;
  font-weight: 700;
}

/* 取消 */
.ui-page-head .pop-exit {
  width: 36rpx;
  height: 36rpx;
  background-color: #ffffff;
  padding: 15rpx;
}

.ui-page-head .pop-exit:after,
.ui-page-head .pop-exit:before {
  background-color: #404041;
  content: '';
  display: block;
  height: 4rpx;
}

.ui-page-head .pop-exit:after {
  transform: translateY(10rpx) rotate(135deg);
}

.ui-page-head .pop-exit:before {
  transform: translateY(14rpx) rotate(-135deg);
}

data


// 弹出微信组件
    show: false,

js


  // 弹出微信组件 page-container
  popup: function (e) {
    const position = e.currentTarget.dataset.position
    let duration = this.data.duration
    this.setData({
      position,
      show: true,
      customStyle: 'z-index:10'
    })
  },
  // 隐藏微信组件 page-container
  exit() {
    this.setData({show: false})
    // wx.navigateBack()
  },

询问弹出框

效果
在这里插入图片描述

用法


<view class="ui-list-item" bindtap="testModal" data-key="张无忌3">

js


  // 选择用户
  testModal: function (e) {
    const username = e.currentTarget.dataset.key;
    wx.showModal({
      title: '拜访员工',
      content: '确认选择【' + username + '】',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },

轻提示

效果
在这里插入图片描述

用法


<view class="iconfont icon-icon_roundclose" data-test="删除此条搜索记录" bindtap="test"></view>

js


    // test-showToast
  test: function (e) {
    // demo
    const test = e.currentTarget.dataset.test;
    wx.showToast({
      title: test,
      icon: 'none',
      duration: 2000
    })
    // demo
  },
  // test-showToast

普通页面跳转

用法

<view bindtap="toFilter" data-url="../fangkeuser/fangkeuser" class="ui-button ui-button-line"><text
            class="iconfont icon-icon_addresslist"></text>添加访客信息</view>
      </view>

js

  // 页面演示跳转 wx.navigateTo 
  toFilter: function (e) {
    const toUrl = e.currentTarget.dataset.url;
    wx.navigateTo({
      url: toUrl,
    })
  },
 // 页面演示跳转 wx.navigateTo

tabBar页面跳转

用法

<view class="sub-nav-item" bindtap="toNavigator" data-url="../fenlei/fenlei">
    <view class="sub-nav-img">
      <image src="../../images/nav-icon-001.png" mode="aspectFit" />
    </view>
    <view class="sub-nav-text">
      注射指导
    </view>
  </view>

js

// 导航栏页面跳转 wx.switchTab
  toNavigator: function (e) {
    const toUrl = e.currentTarget.dataset.url;
    wx.switchTab({
      url: toUrl,
    })
  },

返回上一页

用法

<view class="ui-search-clear" bindtap="fanHui">
    <view>取消</view>
  </view>

js

  // 返回上一页
  fanHui:function(e){
    wx.navigateBack({
      delta: 1
    })
  },

其他

绑定并阻止事件冒泡

用法

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

说明

catchtap="handleTap2"
zlart
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
史上最全的微信小程序代码大全
fenxiangjun的博客
01-14 20万+
微信小程序官方Demo(Hao-Wu/WeApp-Demo)微信小应用示例代码(phodal/weapp-quick)微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo)微信小应用- 掘金主页信息流(hilongjw/weapp-gold)微信小程序（应用号）示例：微信小程序豆瓣电影(zce/weapp-demo)微信小程序-豆瓣电影(hingsir/weapp
获取微信小程序源代码教程
美奇软件开发工作室
02-09 4万+
准备工作： 安装node.js，下载地址：下载 | Node.js 中文网 win7系统的安装下面这个版本： windows764位系统可以安装的Node.js最高版本-互联网文档类资源-CSDN下载
微信小程序源码获取流程
roukmanx的博客
12-17 8136
在对小程序做测试时，发现可以从安卓本地拖出小程序源码，在此做个简单的记录。 思考内容： 首先，小程序的微信源码肯定时存在服务器上的。 其次，在使用小程序时，微信会将小程序从服务器下载到本地，然后再运行，所以在无法从服务器上获取源码的情况下，可以从手机本地获取到下载下来的的小程序源文件。 需知内容： 小程序目录位置：/data/data/com.tencent.mm/MicroMsg//ali......
手把手带你学习微信小程序 —— （微信小程序常用代码块）
最新发布
2301_79655438的博客
05-03 866
/ 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：‘_propertyChange’// 通常 newVal 就是新设置的数据， oldVal 是旧数据Java架构学习技术内容包含有：Spring，Dubbo，MyBatis, RPC, 源码分析，高并发、高性能、分布式,性能优化，微服务 高级架构开发等等。
微信小程序开发笔记 基础篇②——微信小程序 手动查看和代码查看开发者ID（AppID）
小康师兄
04-25 4978
微信小程序开发笔记 基础篇②——微信小程序 手动查看和代码查看开发者ID（AppID）
如何从在安卓Android手机获取微信小程序源代码
「汽车电子助手」的博客
02-12 8897
如何从在安卓Android手机获取微信小程序源代码 获取微信小程序源代码两种方法： 1、在手机中获取。但需要获取手机的root权限，获得微信小程序的wxapkg包； 2、运用模拟器，在电脑上运行微信小程序，获得微信小程序的wxapkg包； 第一个方法有点难，下文以第二种方法展开。 使用到的工具： 1、“电脑端的安卓模拟器”安装包：推荐使用“夜神模拟器”，可从其官方网站获得该安装包：https://...
获取微信小程序源代码反编译微信小程序说明（这里是电脑微信访问微信小程序记录）
01-18
请不要侵权或者模访别人小程序界面！ 1 node.js 运行环境 2 反编译的脚本 3 小程序包解密工具 获取小程序包： C:\Users\yourname\Documents\WeChat Files\Applet\018fd*****\****.wxapkg 请看...
微信小程序demo：在线聊天功能(源代码+截图)
06-19
微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+...
微信小程序-旅行日记源码
06-12
微信小程序-旅行日记源码
微信小程序- 实现地图轨迹移动效果
10-27
微信小程序是一款能够开发出各种功能的便捷工具，其中内置的地图组件，为我们提供了强大的地图展示和交互的能力，为我们的开发节约了不少时间和精力。...基于本代码，可以实现行车路线在微信小程序的移动效果
医院微信小程序
01-26
微信小程序-前端 [开发版] 文档更新： 2018-12-23 体验版本： v0.7.0 [Alpha] 本来是公司的项目，但因某些原因项目终止，所以才可以开源 内部原创组件说明 Toast 组件: 部分截图预览： 修改接口[开源设定]： 修改 ...
电影查询小程序源码
02-27
小程序，电影查询，电影查找，HT电影查找 miniprogram，movie-search
如何获取小程序前端代码
Jq的博客
12-08 1万+
####准备材料 1.第一步下载一个模拟器（推荐使用自带root的模拟器），我使用的是夜神模拟器 下载地址：https://www.yeshen.com/download/fullPackage 2.node.js运行环境 下载地址：https://nodejs.org/en/ 3.反编译的脚本 这里提供一个Github上qwerty472123大神写的node.js版本的，当然也有其它版本的，例...
反编译获取任何微信小程序源码(完)
热门推荐
扯文艺的猿的博客
06-01 11万+
一、前言最近在学习微信小程序开发，半个月学习下来，很想实战一下踩踩坑，于是就仿写了一个滴滴他们家的青桔单车小程序的前端实现，过程一言难尽，差不多两周时间过去了，发现小程序的坑远比想象的要多的多！！在实际练手中，完全是黑盒的，看到人家上线的小程序的效果，纯靠推测，部分效果在绞尽脑汁后能做出大致的实现，但是有些细节，费劲全力都没能做出来。很想一窥源码，查看究竟，看看大厂的前端大神们是如何规避了小程序的...
史上最全的微信小程序代码大全分享
keji_123的博客
03-26 6万+
https://blog.csdn.net/fenxiangjun/article/details/54429666
获取微信小程序官方源码
shujiaw的博客
04-29 1954
快速地获取一个微信小程序源码的方法。 一、xxxxx.wxapkg 小程序文件在微信服务器上，可以在手机（安卓手机）里找到小程序的源文件包。具体位置（根目录/data/data/com.tencent.mm/MicroMsg/{一串16进制字符}/appbrand/pkg/），微信小程序的格式就是:.wxapkg 二、准备材料 1.安装node.js运行环境 2.反编译的脚本 这里提供一个Gith...
微信小程序后台java登录和获取用户信息代码
qi923701的博客
08-09 1万+
上篇博文中说到登录需要两个接口，一个登录获取openid一个获取用户信息，并更新数据库的接口 在此，我为了方便把两个接口写在一起了，也没有写更新数据库的操作，这里只写如何获取openid和用户信息的操作 /** * d登录接口 * @param encryptedData * @param iv * @param code * @return */ @PostMap...
最全的微信小程序代码大全
xuziwan562154119的专栏
06-19 4074
微信小程序官方Demo(Hao-Wu/WeApp-Demo) 微信小应用示例代码(phodal/weapp-quick) 微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo) 微信小应用- 掘金主页信息流(hilongjw/weapp-gold) 微信小程序（应用号）示例：微信小程序豆瓣电影(zce/weapp-demo) 微信小程序-豆瓣电影(hingsir/weapp-douban-film) 小程序 hello world 尝鲜(kunkun12/weapp) 微信
微信小程序请假记录界面代码
06-11
以下是一个简单的微信小程序请假记录界面代码： ``` <view class="container"> <view class="form-group"> <picker mode="date" value="{{startDate}}" bindchange="onStartDateChange"> <view class="picker"> 开始日期: {{startDate}} </view> </picker> </view> <view class="form-group"> <picker mode="date" value="{{endDate}}" bindchange="onEndDateChange"> <view class="picker"> 结束日期: {{endDate}} </view> </picker> </view> <view class="form-group"> <textarea bindinput="onReasonChange" placeholder="请输入请假原因"></textarea> </view> <view class="button-group"> <button type="primary" bindtap="onSubmit">提交</button> <button type="default" bindtap="onReset">重置</button> </view> </view> ``` 在上面的代码中，使用了小程序的picker组件来选择开始日期和结束日期，使用textarea组件来输入请假原因。同时，还有提交和重置按钮，点击提交按钮后会触发onSubmit函数，点击重置按钮会触发onReset函数。在这两个函数中可以进行表单验证和数据提交等操作。注意，上面的代码只是一个简单的示例，实际应用中需要根据需求进行修改和完善。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值