위 챗 애플 릿 유 틸 리 티 코드 세그먼트(모음 집 버 전)

머리말
순 위 는 앞 뒤 를 가리 지 않 고 자신의 습관 에 따라 왔 다.
경험 치 를 정리 하면 뿌 려 서 는 안 됩 니 다.
탭 전환

<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
 })
 }
 },

})
2.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)
 }
})
스크롤-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; }
5.권한 수여 로그 인
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
 })
 }
 }
})

6.요청 발송

 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
  })
  }
  })
7.제목 표시 줄 및 하단 표시 줄
전역 제목 표시 줄

 "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"
 }
 ]
 }
8.네비게이터
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
 })
 }

9.로드 바

<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
  })
  }
  })
10.부 텍스트 처리

 <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;'>")
 })
 }
 })
11.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>

12.검 측 버 전 업데이트
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: '        ,         ,       '
  })
  })
 }
 })
 }
}
13.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'
  });
 } 
 }
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 위 챗 애플 릿 의 실 용적 인 코드 세그먼트 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!

좋은 웹페이지 즐겨찾기