微信小程序实用代码段(收藏版)


Posted in Javascript onDecember 17, 2019

前言

排名不分先后,按自己的习惯来的。

总结经验,不喜勿喷哦~

一、tab切换

<view class=" {{currentTab==0 ? 'select' : ''}}" data-current="0" bindtap="swichNav"> tab1</view>
<view class=" {{currentTab==1 ? 'select' : ''}}" data-current="1" bindtap="swichNav"> tab2</view>

Page({
data:{
 // tab切换 
 currentTab: 0,
},
swichNav: function (e) {
 var that = this;
 if (this.data.currentTab === e.target.dataset.current) {
 return false;
 } else {
 that.setData({
 currentTab: e.target.dataset.current
 })
 }
 },

})

二、swiper切换

<view>
  <text class=" {{currentTab==0 ? 'select' : ''}}" data-current="0" bindtap="swichNav">tab1</text>
  <text class=" {{currentTab==1 ? 'select' : ''}}" data-current="1" bindtap="swichNav">tab2 </text>
  <text class=" {{currentTab==2 ? 'select' : ''}}" data-current="2" bindtap="swichNav">tab3 </text>
  </view>
 <swiper current="{{currentTab}}" bindchange="bindChange" class='swp' style="height: {{aheight?aheight+'px':'auto'}}">
 <swiper-item>页面1</swiper-item>
 <swiper-item>页面2</swiper-item>
 <swiper-item>页面3</swiper-item>
 </swiper>

Page({
data:{
 currentTab: 0,
 aheight: ''
},
// 滑动切换
 bindChange: function (e) {
 var that = this;
 that.setData({
 currentTab: e.detail.current
 });
 },
 //点击tab切换
 swichNav: function (e) {
 var that = this;
 if (this.data.currentTab === e.target.dataset.current) {
 return false;
 } else {
 that.setData({
 currentTab: e.target.dataset.current
 })
 }
 },
 // swiper 自适应高度
 onLoad: function (options) {
 var that = this
 wx.getSystemInfo({
 success: function (res) {
 that.setData({
  aheight: res.screenHeight
 });
 }
 })
 },
})

三、图片上传

<view class="ovf img_box">
  <block wx:for="{{img_arr}}" wx:key="{{item.id}}" bindtap="del">
  <view class='logoinfo' data-index="{{index}}">
   <view class="del">
   <image src="http://192.168.2.61/wx_ry/del.png" mode="widthFix" bindtap="deleteImage"></image>
   </view>
   <image src='{{item}}' mode="widthFix"></image>
  </view>
  </block>
  <view class="upload">
   <image src="http://192.168.2.61/wx_ry/add.png" mode="widthFix" bindtap="upimg"></image>
  </view>
 </view>

.upload { width: 20%; float: left; margin-top:33rpx ; }
.upload image{ width: 100%; }
.logoinfo{ width: 20%; float: left; margin-right:2% ; }
.del{ width: 20%; float: right; }
.del image{ width: 100%; }
.logoinfo image{ width: 100%; }

page({
data:{
 img_arr: []
},
 // 图片上传
 upimg: function () {
 var that = this;
 if (this.data.img_arr.length < 3) {
 wx.chooseImage({
 sizeType: ['original', 'compressed'],
 success: function (res) {
  that.setData({
  img_arr: that.data.img_arr.concat(res.tempFilePaths),
  })

 }
 })
 } else {
 wx.showToast({
 title: '最多上传三张图片',
 icon: 'loading',
 duration: 3000
 });
 }
 },
 // 删除图片
 deleteImage: function (e) {
 var that = this;
 var index = e.currentTarget.dataset.index; //获取当前长按图片下标
 console.log(that.data.img_arr)
 wx.showModal({
 title: '提示',
 content: '确定要删除此图片吗?',
 success: function (res) {
 if (res.confirm) {
  console.log('点击确定了');
  that.data.img_arr.splice(index, 1);
 } else if (res.cancel) {
  console.log('点击取消了');
  return false;
 }
 that.setData({
  img_arr: that.data.img_arr
 });
 }
 })
 },
 // 上传
 upload: function () {
 var that = this
 for (var i = 0; i < this.data.img_arr.length; i++) {
 wx.uploadFile({
 url: 'https:***/submit',
 filePath: that.data.img_arr[i],
 name: 'content',
 formData: adds,
 success: function (res) {
  console.log(res)
  if (res) {
  wx.showToast({
  title: '已提交发布!',
  duration: 3000
  });
  }
 }
 })
 }
 this.setData({
 formdata: ''
 })
 },
 // 提交
 formSubmit: function (e) {
 console.log('form发生了submit事件,携带数据为:', e.detail.value)
 }
})

四、scroll-view滚动页

<scroll-view class="scroll-view_H " scroll-x="true" bindscroll="scroll">
 <view class="fxjx_b1" style="display: inline-block">
 <view class="listb">1</view>
 </view>
 <view class="fxjx_b1" style="display: inline-block">
 <view class="listb">2</view>
 </view>
 </scroll-view>

.scroll-view_H{ white-space: nowrap; height: 600rpx; }
.listb{ padding: 25rpx; white-space: normal; }

五、授权登录

app.js

//app.js
App({
 globalData: {
 userInfo: null,
 unionid:null,
 token:''
 },
 onLaunch: function () {
 /* 已授权之后,自动获取用户信息 */
 // 判断是否授权
 wx.getSetting({
 success: (res) => { //箭头函数为了处理this的指向问题 
 if (res.authSetting["scope.userInfo"]) {
 console.log("已授权");
 // 获取用户信息
 wx.getUserInfo({
  success: (res) => { //箭头函数为了处理this的指向问题
  // this.globalData.isok=true
  this.globalData.token='ok'
  var that =this
  console.log(res.userInfo); //用户信息结果
  wx.getStorage({
  key: 'unionid',
  success(res) {
  that.globalData.unionid=res.data
  }
  })
  this.globalData.userInfo = res.userInfo;
  if (this.userInfoReadyCallback) { //当index.js获取到了globalData就不需要回调函数了,所以回调函数需要做做一个判断,如果app.js中有和这个回调函数,那么就对这个函数进行调用,并将请求到的结果传到index.js中
  this.userInfoReadyCallback(res.userInfo);
  }
  }
 })
 }
 else{
 console.log("未授权");
 wx.removeStorage({
  key: 'unionid'
 })
 }
 }
 })
 }
})

wxml

<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo" class="btn" data-url='../yzzs/yzzs'>
  防疫针助手
 </button>

index.js

// pages/index/index.js
const app = getApp()
Page({
 data: {
 token:''
 },
 onGotUserInfo: function (e) {
 var that = this
 if (this.data.token != 'ok' && app.globalData.token != 'ok') {
 wx.getSetting({
 success: (res) => { //箭头函数为了处理this的指向问题 
  if (res.authSetting["scope.userInfo"]) {
  wx.login({
  success: function (data) {
  console.log('获取登录 Code:' + data.code)
  var postData = {
   code: data.code
  };
  wx.request({
   url: 'https://m.renyiwenzhen.com/rymember.php?mod=xcxlogin&code=' + postData.code + '&nickname=' + e.detail.userInfo.nickName,
   data: {},
   header: {
   'content-type': 'application/json'
   },
   success: function (res) {
   console.log(res.data);
   that.data.token='ok';
   wx.setStorage({
   key: "unionid",
   data: res.data.unionid
   })
   wx.navigateTo({
   url: e.target.dataset.url
   })
   },
   fail: function () {
   console.log('1');
   }
  })
  },
  fail: function () {
  console.log('登录获取Code失败!');
  }
  })
  }
 }
 })
 } else{
 wx.navigateTo({
 url: e.target.dataset.url
 })
 }
 }
})

六、发送请求

wx.request({
  url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=babylist', //仅为示例,并非真实的接口地址
  method: 'post',
  data: {
  unionid: uni
  },
  header: {
  'content-type': 'application/x-www-form-urlencoded' // 默认值
  },
  success(res) {
  // console.log(uni)
  console.log(res.data)
  that.setData({
  list: res.data.bblist
  })
  }
  })

七、标题栏及底部栏

全局标题栏

"window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#3EC8C8",
 "navigationBarTitleText": "乳孕呵护",
 "navigationBarTextStyle": "white"
 }

局部标题栏

{
 "usingComponents": {},
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText": "附近医院"
}

全局底部栏

"tabBar": {
 "color": "#e4e4e4",
 "selectedColor": "#333",
 "list": [
 {
 "pagePath": "pages/index/index",
 "text": "发现",
 "iconPath": "./images/find.png",
 "selectedIconPath": "./images/finded.png"
 },
 {
 "pagePath": "pages/his/his",
 "text": "医院",
 "iconPath": "./images/his.png",
 "selectedIconPath": "./images/hised.png"
 },
 {
 "pagePath": "pages/stu/stu",
 "text": "经验",
 "iconPath": "./images/stu.png",
 "selectedIconPath": "./images/stued.png"
 },
 {
 "pagePath": "pages/my/my",
 "text": "我的",
 "iconPath": "./images/my.png",
 "selectedIconPath": "./images/myed.png"
 }
 ]
 }

八、navigator

1、wxml

<navigator url="/pages/hishome/hishome" open-type="navigate" hover-class="none"> 
底部栏没有的路由
</navigator>
<navigator open-type="switchTab" url="/pages/his/his" hover-class="none">
底部栏有的路由
</navigator>

2、js

go: function (e) {
 wx.navigateTo({
 url: '../eatxq/eatxq?id=' + e.currentTarget.dataset.id + "&name=" + e.currentTarget.dataset.name
 })
 }

九、加载条

<loading hidden="{{onff}}">加载中</loading>
<view>页面</view>

加载完成true

wx.request({
  url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=caneatsearch', 
  method: 'post',
  header: {
  'content-type': 'application/x-www-form-urlencoded' // 默认值
  },
  data: {
  search: options.search
  },
  success(res) {
  that.setData({
  list: res.data.fllist,
  onff: true
  })
  }
  })

十、富文本处理

<view class="txt">
 <rich-text nodes="{{msg}}" ></rich-text>
 </view>

利用正则修改收到的数据

wx.request({
 url: 'https://m.renyiwenzhen.com/xcx_ajax.php?action=cjdetail', 
 method: 'post',
 data: {
 id: options.id
 },
 header: {
 'content-type': 'application/x-www-form-urlencoded' // 默认值
 },
 success(res) {
 that.setData({
  msg: res.data.cjmag.cjxq.replace(/\<p>/g, "<p style='line-height: 24px; font-size:15px;text-align: justify;margin:15px 0;'>")
 })
 }
 })

十一、filter过滤数据

1、在根目录下的utils文件夹里创建一个名为filter.wxs文件 2、写入自己要定义的条件

var xb=function (v) {
 var xingb=''
 if(v==1){
 xingb="男宝宝"
 }
 else{
 xingb="女宝宝"
 }
 return xingb
}
module.exports = {
 xb:xb
}

3、在页面中引入使用

<wxs src="../../utils/filter.wxs" module="filter" />
<view><text>{{filter.xb(isxb)}}</text></view>

十二、检测版本更新

app.js

onLaunch: function () {
 if (wx.canIUse('getUpdateManager')) {
 const updateManager = wx.getUpdateManager()
 updateManager.onCheckForUpdate(function (res) {
 // 请求完新版本信息的回调
 if (res.hasUpdate) {
  updateManager.onUpdateReady(function () {
  wx.showModal({
  title: '更新提示',
  content: '新版本已经准备好,是否重启应用?',
  success: function (res) {
  // res: {errMsg: “showModal: ok”, cancel: false, confirm: true}
  if (res.confirm) {
   // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
   updateManager.applyUpdate()
  }
  }
  })
  })
  updateManager.onUpdateFailed(function () {
  // 新的版本下载失败
  wx.showModal({
  title: '已经有新版本了哟~',
  content: '新版本已经上线啦,请您删除当前小程序,重新搜索打开哟'
  })
  })
 }
 })
 }
}

十三、点击tab跳转对应的的项目页面

我们经常会遇到这种需求:

点击对应的的tab,这里比如说是A页。

微信小程序实用代码段(收藏版)

跳转到对应项目的页面,这里比如说是B页。

微信小程序实用代码段(收藏版)

A页:

<view class="project_nab ovf">
    <view class="on"> 详情 </view>
    <view class="project_item" bindtap="goitem" data-url='jd'>建档</view>
    <view class="project_item" bindtap="goitem" data-url='cj'>产检</view>
    <view class="project_item" bindtap="goitem" data-url='fm'>分娩</view>
   </view>

 goitem:function (e) {
 wx.navigateTo({
  url: '/pages/item/item?url=' + e.target.dataset.url
 })
 },

B页:

<view class="top1 ovf">
    <view class="" ><navigator url="/pages/hishome/hishome" open-type="navigate">详情</navigator></view>
    <view class=" {{currentTab==0 ? 'select' : ''}}" data-current="0" bindtap="swichNav"> 产检 </view>
    <view class=" {{currentTab==1 ? 'select' : ''}}" data-current="1" bindtap="swichNav"> 建档 </view>
    <view class=" {{currentTab==2 ? 'select' : ''}}" data-current="2" bindtap="swichNav"> 分娩 </view>
  </view>

 onLoad: function (options) {
 var that = this;
 console.log(options.url)
 if (options.url === 'cj') {
  that.setData({
  currentTab: '0',
  btn: '产检',
  set: 'cj'
  });
 } else if (options.url === 'jd') {
  that.setData({
  currentTab: '1',
  btn: '建档',
  set: 'jd'
  });
 } else {
  that.setData({
  currentTab: '2',
  btn: '分娩',
  set: 'fm'
  });
 } 
 }

总结

以上所述是小编给大家介绍的微信小程序实用代码段,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 #Javascript
微信小程序利用云函数获取手机号码
Dec 17 #Javascript
ant design实现圈选功能
Dec 17 #Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 #Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 #Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 #Javascript
TypeScript高级用法的知识点汇总
Dec 17 #Javascript
You might like
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
js实现密码强度检验
2017/01/15 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python实现滑雪游戏
2020/02/22 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
七夕相亲活动策划方案
2014/08/31 职场文书
国庆横幅标语
2014/10/08 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
离婚代理词范文
2015/05/23 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB