网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑：jimmy 日期: 2024/12/27 浏览：3 次 )

前言

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

总结经验，不喜勿喷哦~

一、tab切换

<view class=" {{currentTab==0 " data-current="0" bindtap="swichNav"> tab1</view>
<view class=" {{currentTab==1 " 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 " data-current="0" bindtap="swichNav">tab1</text>
  <text class=" {{currentTab==1 " data-current="1" bindtap="swichNav">tab2 </text>
  <text class=" {{currentTab==2 " data-current="2" bindtap="swichNav">tab3 </text>
  </view>
 <swiper current="{{currentTab}}" bindchange="bindChange" class='swp' style="height: {{aheight">
 <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="/UploadFiles/2021-04-02/del.png">


四、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"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"htmlcode">



 "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"&name=" + e.currentTarget.dataset.name
 })
 }







九、加载条





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







加载完成true







wx.request({
  url: 'https://m.renyiwenzhen.com/xcx_ajax.php"htmlcode">



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





利用正则修改收到的数据







 wx.request({
 url: 'https://m.renyiwenzhen.com/xcx_ajax.php"<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="/UploadFiles/2021-04-02/filter.wxs">


十二、检测版本更新


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"htmlcode">



  <view class="top1 ovf">
    <view class="" ><navigator url="/pages/hishome/hishome" open-type="navigate">详情</navigator></view>
    <view class=" {{currentTab==0 " data-current="0" bindtap="swichNav"> 产检 </view>
    <view class=" {{currentTab==1 " data-current="1" bindtap="swichNav"> 建档 </view>
    <view class=" {{currentTab==2 " 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'
  });
 } 
 }





总结


以上所述是小编给大家介绍的微信小程序实用代码段，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！


            

           
            上一篇：js实现多图和单图上传显示

            下一篇：微信小程序修改数组长度的问题的解决

        

    

    
    
    

        
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap