小程序代码 – gitweixin

UI控件 5月 23,2021

滑动选型卡微信小程序代码

无论app，还是小程序，都需要像今日头条那样，用滑动选项卡来展示不同的栏目。

通过本组件，能快速方便实现选项卡。

wxml代码如下：

<view class="container">
	<view class="container-body">
		<view class="tab">
			<view class="tab-nav">
				<text wx:for="{{tabnav.tabitem}}" bindtap="setTab" class="{{showtab==index?'active':''}}" data-tabindex="{{index}}" data-type="{{item.type}}" wx:key="{{item.type}}">{{item.text}}</text>
				<view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>
			</view>
			<view class="tab-content" style="" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrollTouchend" style="width: {{tabnav.tabnum*100}}%;transform:translateX(-{{showtab*100/tabnav.tabnum}}%);margin-left: {{marginleft}}px;">
				<view class="tab-panel">
					<view class="test-list">
						<view class="test-item" wx:for="{{testdata1}}" wx:key="{{item.id}}">
							<view class="test-item-t">类型：{{item.type}}</view>
							<view class="test-item-b">{{item.text}}</view>
						</view>
					</view>
				</view>
				<view class="tab-panel">
					<view class="test-list">
						<view class="test-item" wx:for="{{testdata2}}" wx:key="{{item.id}}">
							<view class="test-item-t">类型：{{item.type}}</view>
							<view class="test-item-b">{{item.text}}</view>
						</view>
					</view>
				</view>
				<view class="tab-panel">
					<view class="test-list">
						<view class="test-item" wx:for="{{testdata3}}" wx:key="{{item.id}}">
							<view class="test-item-t">类型：{{item.type}}</view>
							<view class="test-item-b">{{item.text}}</view>
						</view>
					</view>
				</view>
				<view class="tab-panel">
					<view class="test-list">
						<view class="test-item" wx:for="{{testdata4}}" wx:key="{{item.id}}">
							<view class="test-item-t">类型：{{item.type}}</view>
							<view class="test-item-b">{{item.text}}</view>
						</view>
					</view>
				</view>
				<view class="tab-panel">
					<view class="test-list">
						<view class="test-item" wx:for="{{testdata5}}" wx:key="{{item.id}}">
							<view class="test-item-t">类型：{{item.type}}</view>
							<view class="test-item-b">{{item.text}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
<!-- 	<view class="footer-tab footer-tab-widthicon">
		<view class="footer-tab-item {{showfootertab==0?'active':''}}" data-index="0" bindtap="showTab">
			<image src="../../images/{{showfootertab==0?'xinxifill':'xinxi'}}.png" mode="aspectFit"></image>
			<text>问题反馈</text>
		</view>
		<view class="footer-tab-item {{showfootertab==1?'active':''}}" data-index="1" bindtap="showTab">
			<image src="../../images/{{showfootertab==1?'wenhaofill':'wenhao'}}.png" mode="aspectFit"></image>
			<text>常见问题</text>
		</view>
	</view> -->
</view>

js代码如下:

Page({
data: {
showtab:0, //顶部选项卡索引
showtabtype:”, //选中类型
tabnav:{}, //顶部选项卡数据
testdataall:[], //所有数据
testdata1:[], //数据列表
testdata2:[], //数据列表
testdata3:[], //数据列表
testdata4:[], //数据列表
testdata5:[], //数据列表
startx:0, //开始的位置x
endx:0, //结束的位置x
critical: 100, //触发切换标签的临界值
marginleft:0, //滑动距离
},
onLoad: function () {
this.setData({
tabnav:{
tabnum:5,
tabitem:[
{
“id”:1,
“type”:”A”,
“text”:”tab1″
},
{
“id”:2,
“type”:”B”,
“text”:”tab2″
},
{
“id”:3,
“type”:”C”,
“text”:”tab3″
},
{
“id”:4,
“type”:”D”,
“text”:”tab4″
},
{
“id”:5,
“type”:”E”,
“text”:”tab5″
},
]
},
})
this.fetchTabData(0);
},
fetchData:function(t){ //生成数据
const newquestions = [];
for (let i = 0; i < 20; i++) { newquestions.push({ “id”:i+1, “type”: t, “text”:”服务名称适用品类服务实施详情服务期限服务生效时间摔碰管修一年笔记本本服务有效期内，如客户的数码摄照产品在正常使用过程中由于不慎将产品坠落、挤压、碰撞，而产生的硬件故障，本服务将免费提供硬件维修或更换，使产品重新恢复正常运行。12个月购机满30天后开始生效摔碰管修两年笔记本、数码相机、摄像机、手机、小数码” }) } return newquestions }, fetchTabData:function(i){ console.log(Number(i)); switch(Number(i)) { case 0: this.setData({ testdata1: this.fetchData(‘A’) }) break; case 1: this.setData({ testdata2: this.fetchData(‘B’) }) break; case 2: this.setData({ testdata3: this.fetchData(‘C’) }) break; case 3: this.setData({ testdata4: this.fetchData(‘D’) }) break; case 4: this.setData({ testdata5: this.fetchData(‘E’) }) break; default: return; } }, setTab:function(e){ //设置选项卡选中索引 const edata = e.currentTarget.dataset; this.setData({ showtab: Number(edata.tabindex), showtabtype: edata.type }) this.fetchTabData(edata.tabindex); }, scrollTouchstart:function(e){ let px = e.touches[0].pageX; this.setData({ startx: px }) }, scrollTouchmove:function(e){ let px = e.touches[0].pageX; let d = this.data; this.setData({ endx: px, }) if(px-d.startx-d.critical){
this.setData({
marginleft: px – d.startx
})
}
},
scrollTouchend:function(e){
let d = this.data;
if(d.endx-d.startx >d.critical && d.showtab>0){
this.setData({
showtab: d.showtab-1,
})
// this.fetchTabData(d.showtab-1);
}else if(d.endx-d.startx <-d.critical && d.showtab<this.data.tabnav.tabnum-1){
this.setData({
showtab: d.showtab+1,
})
}
this.fetchTabData(d.showtab);
this.setData({
startx:0,
endx:0,
marginleft:0
})
},
})

下载地址：工程代码

作者 east

工具类 5月 21,2021

查汉字读音微信小程序源代码

在现实生活中，读错别人姓名是件尴尬的事。通过查汉字读音微信小程序，可以方便知道字的读音。


<view class="container">
  <view class="info-container">
    <text class="pinyin-text">{{pinyinText}}</text>
    <input focus="{{true}}" maxlength="1" bindinput="onInput" placeholder="" />
    <text class="tip">输入汉字</text>
  </view>
</view>

// index.js
var app = getApp()
var pinyin = require('../../utils/pinyin.js');
Page({
  data: {
    pinyinText: '',
  },
  onLoad: function () {

  },
  // 事件处理函数
  onInput: function(e) {
    console.log(e)
    var char = e.detail.value;
    console.log('--', char);
    char = char && char.trim();
    if (char.length == 1) {
      if (pinyin.hasOwnProperty(char)) {
        console.log(pinyin[char].join(', '))
        this.setData({
          pinyinText: pinyin[char].join(', ')
        });
      }
      else {
        this.setData({
          pinyinText: '找不到，^_^'
        });
      }
    }
    else {
      this.setData({
        pinyinText: ''
      });
    }
  },

})

下载地址：工程代码

作者 east

电商类 5月 19,2021

仿拼多多拼团倒计时微信小程序源码

拼多多起家一个原因，是利用微信海量流量，用拼团使用户自发拉新用户。本小程序有这个特色功能，还有首页、商家、进货单、兑换、我的等功能。

//home.js
//获取应用实例
// var ajax = require('../../utils/ajax.js')
// var CountDown = require('../../utils/countdown.js');

var app = getApp()
Page({
  data: {
    scrollTop:0,
    height:"1000px",
    /*轮播图*/
    swiper:{
      height:"420rpx",
      imgUrls: [],
      changeHandler:function(e){
        console.log(e.detail.current)
      },
      indicatorDots: false,
      autoplay: false,
      interval: 0,
      duration: 0
    },
    /*类目列表*/
    sortRows:[
      [
        {
          image:"./images/wx.png",
          title:"文胸",
          url:"./"
        },
        {
          image:"./images/nk.png",
          title:"内裤",
          url:"./"
        },
        {
          image:"./images/jjf.png",
          title:"家居服",
          url:"./"
        },
        {
          image:"./images/ssy.png",
          title:"塑身衣",
          url:"./"
        },
        {
          image:"./images/wp.png",
          title:"袜品",
          url:"./"
        }
      ],[
        {
          image:"./images/bnny.png",
          title:"保暖内衣",
          url:"./"
        },
        {
          image:"./images/cgny.png",
          title:"常规内衣",
          url:"./"
        },
        {
          image:"./images/ddk.png",
          title:"打底裤",
          url:"./"
        },
        {
          image:"./images/ssdp.png",
          title:"时尚单品",
          url:"./"
        },
        {
          image:"./images/more.png",
          title:"更多",
          url:"./"
        }
      ]
    ],
    /*拼团*/
    groups:[
      {
        teamBuyingDesc:"秋衣扎在秋裤里秋裤扎在袜子里这是对冬天最起码的尊重，但是首先你要有秋衣和秋裤。壹级采本期为您推荐37度恒温发热衣，秋衣秋裤纯棉系列，秋衣秋裤莫代尔系列，一定要看哦！",
        teamBuyingId:28,
        teamBuyingImg:"http://img-service.yijicai.cn/modTeamBuying/ab041947-54ed-4251-a4a4-635c89fdaeb6.png",
        teamBuyingTitle:"【天天拼货团-秋衣秋裤专场】",
        time:6000
      }
    ]

  },
  onLoad: function (opts) {
   console.log("onload");
   console.log(opts);
   console.log("onload");
   this.loadData();
  },
  onUnload: function (opts) {
   console.log("onUnload");
   
  },
  onReady:function(){
  },
  onShow:function(opts){
    console.log("onshow");
   console.log(opts);
   console.log("onshow");
  },
  //加载页面数据
  loadData:function(){
    var vm = this;
    // 加载轮播和拼团
    wx.request({
      url: 'https://safe.yijicai.cn/wap/data/get?action=tbIndex', //仅为示例，并非真实的接口地址
      header: {
          'content-type': 'application/json'
      },
      success: function(res) {
        var data = res.data;
        var result = data.result;
        var teamBuying = result.teamBuying;
        teamBuying = [
          {
            teamBuyingImg: "http://img-service.yijicai.cn/addTeamBuying/5096903f-c0b6-4f98-8917-26fc46c65544.png",
            teamBuyingId: 30,
            time: -26000,
            teamBuyingTitle: "【天天拼货团-厂家内裤专场】",
            teamBuyingDesc: "秋天纯棉内裤专场会。"
          },
          {
            teamBuyingImg: "http://img-service.yijicai.cn/addTeamBuying/69bba867-fdd4-405d-80e8-e93db36e27e2.png",
            teamBuyingId: 29,
            time: 27000,
            teamBuyingTitle: "【天天拼货团-打底保暖专场】",
            teamBuyingDesc: "降温了！客户说必须到“壹级采”采购保暖衣、打底裤回来卖！壹级采搜罗了爆款跑量的加绒保暖衣，百搭内搭外穿打底裤，保证品质，绝对低价！"
          },
          {
            teamBuyingImg: "http://img-service.yijicai.cn/modTeamBuying/ab041947-54ed-4251-a4a4-635c89fdaeb6.png",
            teamBuyingId: 28,
            time: 28000,
            teamBuyingTitle: "【天天拼货团-秋衣秋裤专场】",
            teamBuyingDesc: "秋衣扎在秋裤里秋裤扎在袜子里这是对冬天最起码的尊重，但是首先你要有秋衣和秋裤。壹级采本期为您推荐37度恒温发热衣，秋衣秋裤纯棉系列，秋衣秋裤莫代尔系列，一定要看哦！"
          },
          {
            teamBuyingImg: "http://img-service.yijicai.cn/addTeamBuying/2629d616-2029-4fa9-9ef5-748c3f0acb44.png",
            teamBuyingId: 27,
            time: 29000,
            teamBuyingTitle: "【天天拼货团-可爱袖套专场】",
            teamBuyingDesc: "冬季,各式各样的温暖大衣将会成为唯一热卖的单品... 一个实用的单品横空出世,不仅解决了保暖问题,同时也成为冬季时尚不可或缺的搭配,那就是袖套.壹级采为您推荐卡哇依16年新款袖套！"
          },
          {
            teamBuyingImg: "http://img-service.yijicai.cn/addTeamBuying/4a6913f7-07e5-4055-a14b-c70c12c5ae39.png",
            teamBuyingId: 25,
            time: 30000,
            teamBuyingTitle: "【天天拼货团-冬季棉拖专场（50双发货）】",
            teamBuyingDesc: "万佳鑫热销爆款棉拖又来了！本期壹级采为您推荐万佳鑫包跟拖鞋，更暖，更舒适，一定要关注哟！"
          }
        ];
        
        vm.setData({
          groups:teamBuying,
          'swiper.imgUrls':result.ads.map(function(item,index){
            return item.adsImg
          })
        });



        var timeArr =  teamBuying.map(function(item,index){
          return {
            time: item.time,
            index: index
          };
        });
        // new CountDown.CountDown({
        //   timeArr:timeArr,
        //   fn:function(){

        //   }
        // })

        function countDown(){
          var item;
          var update = {};
          for(var i=0;i<timeArr.length;i++){
            item = timeArr[i];
            item.time -= 100;
            // debugger;
            update["groups["+item.index+"].time"] = item.time;
            update["groups["+item.index+"].timeObj"] = timeConverter(item.time);
            if( item.time <= 0){
              timeArr.splice(i--,1);
            }
          }
          console.log("countdown.......");
          vm.setData(update);
          if(timeArr.length){
              setTimeout(countDown,100);
          }
        }
        countDown();
        function timeConverter(time){
          time=parseInt(time);
          // 分秒（毫秒）
          var minSec=parseInt( (time % 1000) / 100 );
          var sec= parseInt( time % 60000 / 1000 );
          sec=sec>=10?sec+"":"0"+sec;
          var min=parseInt( time % 3600000 / 60000 );
          min=min>=10?min+"":"0"+min;
          var hour=parseInt( time / 3600000 );
          hour=hour>=10?hour+"":"0"+hour;
          return {
            minSec:minSec,
            sec:sec,
            min:min,
            hour:hour
          }
        }
      }
   });

   //加载推荐商品
   wx.request({
    url: 'test.php', //仅为示例，并非真实的接口地址
    data: {
      x: '' ,
      y: ''
    },
    header: {
        'content-type': 'application/json'
    },
    success: function(res) {
      console.log(res.data)
    }
  });


  },
  //搜索框点击
  searchtap:function(event){
    // console.log(event.currentTarget.dataset);
    // wx.navigateTo({
    //   url: '../productDetail/productDetail'
    // });
    // console.log(11111);
  },
  //拼团
  grouptap:function(event){
    var id=event.currentTarget.dataset.id;
    console.log(id);
    // wx.navigateTo({
    //   url: '../?id='+id
    // });
  },
  //页面竖向滚动(触发频率太低了)
  scrollY:function(event){
    var that=this;
    var scrollTop=event.detail.scrollTop;
    that.setData({
        scrollTop:scrollTop
    });
    console.log(scrollTop);
  },
  /*跳转页面 */
  pageTo:function(page){
    wx.navigateTo({
      url: page,
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  }

})

下载地址：工程代码

作者 east

工具类 5月 16,2021

拍照查词字典微信小程序源代码

这是一款可用于教育类的小程序，类似步步高词典、小猿搜题等，用户可以用来查字的词典解释。如果看到不怎道怎样查的字或词，还可以直接拍照搜索。

<view class="item" style="margin-bottom:5px" catchtap="Detail" id="{{detail.id}}">
        <view class="info">
            <!--<image class="avatar" src="{{item.member.avatar_mini}}"></image>-->
            <text class="searchword" style="margin-top:130px;">{{detail.zi}}</text>
            <text class="reply" style="color:grey">拼音：</text>
                <block wx:for="{{detail.pinyins}}" wx:key="*this">
                    <text class="reply" bindtap="morePyTap" id="{{item}}" style="border-bottom:1px dashed blue;;color:blue">{{item}}</text>
                </block>
            

                <text class="reply"><text style="color:grey;margin-left:10px">五笔：</text>{{detail.wubi}}</text>

            </view>
        <view class="info" style="margin-left:70px;margin-top:30rpx;">
            
            <text style="color:grey;" class="reply">部首：</text>
            <text class="reply" id="{{detail.bushou}}" bindtap="morebushouTap" style="border-bottom:1px dashed blue;;color:blue">{{detail.bushou}}</text>
        
            <text class="reply"><text style="color:grey;margin-left:10px;">笔画：</text>{{detail.bihua}}</text>
            </view>
            
        <view class="info" style="margin-left:70px;margin-top:30rpx;">
                 <text style="color:grey;"  class="reply">读音：</text>
                 <text class="reply">{{detail.pinyin}}</text>
        </view>

        <!--<view class="titleBox">
            <text class="title">{{item.wubi}}</text>
            
        </view>-->

        <!--<view class="node">
            <text class="node">{{item.pinyin}}</text>
        </view>-->
    </view>
<!--<scroll-view scroll-y="true" style="height: 100%;">-->
    <block wx:if="{{detail.jijie!=null && detail.jijie!=''}}">
        <text style = "color:grey">简解：</text>  
        <view style="margin-top:2px;margin-bottom:2px;margin-left:15rpx;line-height:1.3" wx:key="*this" wx:for="{{detail.jijie}}">
        
        <text>{{item}}</text>
        </view>
    </block>
    <block wx:if="{{detail.xiangjie!=null && detail.xiangjie!=''}}">
     <view style = "margin-bottom:8px;margin-top:8px;border-bottom: 1px solid #e2e2e2;"></view>
        <text style = "color:grey">详解：</text>  
        <view style="margin-top:2px;margin-bottom:2px;margin-left:15rpx;line-height:1.3" wx:key="*this" wx:for="{{ detail.xiangjie }}">
            {{item}}
        </view>
    </block>

工程代码：下载地址

作者 east

企业类 4月 23,2021

创客孵化器微信小程序代码

各地创客空间如雨后春笋，功能：

有图文的创客介绍。

入驻申请。项目基本信息、提交图片

预约看房。留下联系方式。

服务集市：各类记账等公司。

import util from './../../utils/util.js';
Page({
  data: {
    sortindex:0,  //排序索引
    sortid:null,  //排序id
    sort:[],
    activitylist:[], //会议室列表列表
    scrolltop:null, //滚动位置
    page: 0  //分页
  },
  onLoad: function () { //加载数据渲染页面
    this.fetchConferenceData();
    this.fetchSortData();
  },
  fetchSortData:function(){ //获取筛选条件
    this.setData({
      "sort": [
          {
              "id": 0,
              "title": "热门点击"
          },
          {
              "id": 1,
              "title": "最新发布"
          },
          {
              "id": 2,
              "title": "最多参与"
          },
      ]
    })
  },
  fetchConferenceData:function(){  //获取会议室列表
    const perpage = 10;
    this.setData({
      page:this.data.page+1
    })
    const page = this.data.page;
    const newlist = [];
    for (var i = (page-1)*perpage; i < page*perpage; i++) {
      newlist.push({
        "id":i+1,
        "name":"云栖技术分享日（云栖TechDay"+(i+1)+"）",
        "status": util.getRandomArrayElement(["进行中","报名中","已结束"]),
        "time": "2016/07/12 14:00",
        "coments": Math.floor(Math.random()*1000),
        "address":"杭州云栖小镇咖啡馆  （杭州云计算产业园内）",
        "imgurl":"http://pic.58pic.com/58pic/12/34/51/85d58PICkjf.jpg"
      })
    }
    this.setData({
      activitylist:this.data.activitylist.concat(newlist)
    })
  },
  setSortBy:function(e){ //选择排序方式
    const d= this.data;
    const dataset = e.currentTarget.dataset;
    this.setData({
      sortindex:dataset.sortindex,
      sortid:dataset.sortid
    })
    console.log('排序方式id：'+this.data.sortid);
  },
  setStatusClass:function(e){ //设置状态颜色
    console.log(e);
  },
  scrollHandle:function(e){ //滚动事件
    this.setData({
      scrolltop:e.detail.scrollTop
    })
  },
  goToTop:function(){ //回到顶部
    this.setData({
      scrolltop:0
    })
  },
  scrollLoading:function(){ //滚动加载
    this.fetchConferenceData();
  },
  onPullDownRefresh:function(){ //下拉刷新
    this.setData({
      page:0,
      activitylist:[]
    })
    this.fetchConferenceData();
    this.fetchSortData();
    setTimeout(()=>{
      wx.stopPullDownRefresh()
    },1000)
  }
})

下载地址：工程代码

作者 east

O2O 4月 6,2021

切换城市微信小程序代码

一款O2O的微信小程序，切换城市是最基本的组件。选择拼音，切换到全国各个市。

var city = require('../../utils/city.js');


Page({
  data: {
    searchLetter: [],
    showLetter: "",
    winHeight: 0,
    tHeight:0,
    bHeight:0,
    startPageY:0,
    cityList:[],
    isShowLetter:false,
    scrollTop:0,
    city:""
  },
  onLoad: function (options) {
    // 生命周期函数--监听页面加载
    var searchLetter = city.searchLetter;
    var cityList=city.cityList();
    // console.log(cityInfo);

    var sysInfo = wx.getSystemInfoSync();
    console.log(sysInfo);
    var winHeight = sysInfo.windowHeight;

    //添加要匹配的字母范围值
    //1、更加屏幕高度设置子元素的高度
    var itemH = winHeight / searchLetter.length;
    var tempObj = [];
    for (var i = 0; i < searchLetter.length; i++) {
      var temp = {};
      temp.name = searchLetter[i];
      temp.tHeight = i * itemH;
      temp.bHeight = (i + 1) * itemH;

      tempObj.push(temp)
    }
    
    this.setData({
      winHeight: winHeight,
      itemH: itemH,
      searchLetter: tempObj,
      cityList:cityList
    })

    console.log(this.data.cityInfo);
  },
  onReady: function () {
    // 生命周期函数--监听页面初次渲染完成

  },
  onShow: function () {
    // 生命周期函数--监听页面显示

  },
  onHide: function () {
    // 生命周期函数--监听页面隐藏

  },
  onUnload: function () {
    // 生命周期函数--监听页面卸载

  },
  onPullDownRefresh: function () {
    // 页面相关事件处理函数--监听用户下拉动作

  },
  onReachBottom: function () {
    // 页面上拉触底事件的处理函数

  },
  onShareAppMessage: function () {
    // 用户点击右上角分享
    return {
      title: 'title', // 分享标题
      desc: 'desc', // 分享描述
      path: 'path' // 分享路径
    }
  },
  searchStart: function (e) {
    var showLetter = e.currentTarget.dataset.letter;
    var pageY = e.touches[0].pageY;
    this.setScrollTop(this,showLetter);
    this.nowLetter(pageY,this);
      this.setData({
        showLetter: showLetter,
        startPageY: pageY,
        isShowLetter:true,
      })
  },
  searchMove: function (e) {
    var pageY = e.touches[0].pageY;
    var startPageY=this.data.startPageY;
    var tHeight=this.data.tHeight;
    var bHeight=this.data.bHeight;
    var showLetter = 0;
    console.log(pageY);
    if(startPageY-pageY>0){ //向上移动
        if(pageY<tHeight){
          // showLetter=this.mateLetter(pageY,this);
          this.nowLetter(pageY,this);
        }
    }else{//向下移动
        if(pageY>bHeight){
            // showLetter=this.mateLetter(pageY,this);
            this.nowLetter(pageY,this);
        }
    }
  },
  searchEnd: function (e) {
    // console.log(e);
    // var showLetter=e.currentTarget.dataset.letter;
    var that=this;
    setTimeout(function(){
      that.setData({
      isShowLetter:false
    })
    },1000)
    
  },
  nowLetter: function (pageY, that) {//当前选中的信息
    var letterData = this.data.searchLetter;
    var bHeight = 0;
    var tHeight = 0;
    var showLetter="";
    for (var i = 0; i < letterData.length; i++) {
      if (letterData[i].tHeight <= pageY && pageY<= letterData[i].bHeight) {
        bHeight = letterData[i].bHeight; 
        tHeight = letterData[i].tHeight;
        showLetter = letterData[i].name;
        break;
      }
    }

    this.setScrollTop(that,showLetter);

    that.setData({
      bHeight:bHeight,
      tHeight:tHeight,
      showLetter:showLetter,
      startPageY:pageY
      })
  },
  bindScroll:function(e){
    console.log(e.detail)
  },
  setScrollTop:function(that,showLetter){
      var scrollTop=0;
      var cityList=that.data.cityList;
      var cityCount=0;
      var initialCount=0;
      for(var i=0;i<cityList.length;i++){
         if(showLetter==cityList[i].initial){
           scrollTop=initialCount*30+cityCount*41;
            break;
         }else{
            initialCount++;
            cityCount+=cityList[i].cityInfo.length;
         }
      }

      that.setData({
        scrollTop:scrollTop
      })
  },
  bindCity:function(e){
    var city=e.currentTarget.dataset.city;
    this.setData({city:city})
  }
})

下载地址：工程地址

作者 east

工具类 4月 5,2021

辩论倒计时微信小程序源码

例如像美国大选那样的辩论，正反双方的发言都是有时间控制的。本微信小程序可以设置每次发言时间（立论、驳立论、质辩等的时间），而且可以设置提前15秒等提醒。

// pages/config/config.js
Page({
  data:{
    configs:{ // 初始化该对象值

    }
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    //读取缓存中的初始配置
    try {
        var configs = wx.getStorageSync('configs');
        this.setData({
          configs:configs
        })
    } catch (e) {
      console.log(e);
    }
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },

  // 开关选择器事件
  switchChange:function(event){

    var id = event.currentTarget.id; //标识
    var configs = this.data.configs;
    var config = configs[id]; //获取之前的数据

    //如果对象不存在，创建一个新的对象
    if(!config){
        config = Object.create(null);
    }

    config.state = event.detail.value;
    
    configs[id] = config;

    this.setData({
      configs:configs
    });

    //把设置保存到缓存中中，便于计时页面的使用
    try {
        wx.setStorageSync('configs', configs);
    } catch (e) {
      console.log(e);
    }
  },

  // slider 事件
  sliderChange:function(event){
    var id = event.currentTarget.id; //标识
    var configs = this.data.configs;
    var config = configs[id]; //获取之前的数据
    
    //如果对象不存在，创建一个新的对象
    if(!config){
        config = Object.create(null);
    }

    config.time = event.detail.value;
    
    configs[id] = config;

    this.setData({
      configs:configs
    });
    //把设置保存到缓存中中，便于计时页面的使用
    try {
        wx.setStorageSync('configs', configs);
    } catch (e) {
      console.log(e);
    }
  },

  // 声音提醒 事件
  radioChange:function(event){
    var id = event.currentTarget.id; //标识
    var configs = this.data.configs;
    var config = configs[id]; //获取之前的数据
    
    //如果对象不存在，创建一个新的对象
    if(!config){
        config = Object.create(null);
    }

    config.voice = event.detail.value;
    
    configs[id] = config;

    this.setData({
      configs:configs
    });
    //把设置保存到缓存中中，便于计时页面的使用
    try {
        wx.setStorageSync('configs', configs);
    } catch (e) {
      console.log(e);
    }
  }

})

下载地址：工程代码

作者 east

电商类 4月 2,2021

东航订机票微信小程序源码

仿东航、携程等订票app。

订票：分单程、往返，可以订机票和酒店。查看具体航班，浏览酒店具体信息。

订单：下订单，微信支付，查看订单，修改订单。

let app = getApp();
let utils = require('../../utils/utils');
let dateFormat = require('../../utils/dateutil');
Page({
     data:{
        hasInvoice:false,
        hasCoupon:false,
        hasAgree:false,
        totalPrice: '--',
        nextStep: {
           btnWord: '去支付'
        },
        costDetail: {
           show: false
        },
        loading:true
   },
   //添加乘机人
   addp:function(e){
      this.refreshPassengerHandle();
      let passengerInfo= wx.getStorageSync('passengerInfo');
      if(this.productKey==passengerInfo.productKey){
        let passengerList=passengerInfo.passengerList;
        if(!passengerList||passengerList.length==0){
          wx.navigateTo({
            url: '../createTraveller/createTraveller?type=1'
           })
        }else{
           wx.navigateTo({
            url: '../selectpassengers/selectpassengers',
           })
        }
      }else{
        wx.navigateTo({
            url: '../createTraveller/createTraveller?type=1'
        })
      }
   },
   onLoad:function(params){
      if(this.loadCount>5)
      {
        app.message('请求失败！')
        return;
      }
      this.loadCount=this.loadCount||0;
      this.loadCount++;
      this.productKey=params.productKey;
      this.childrenNum=params.childrenNum;
      this.adultNum=params.adultNum;
      let that=this;

      app.globalData.afterLogin.then(()=>{
          app.post('api/Product/Booking',{
          ProductKey: this.productKey
          }).then((data)=>{
            if(this.isUnload)return;
            if(data.Code==4){
              app.login().then(()=>{
                this.onLoad(params);
              })
            }else if(data.Code==200){
              that.setBookingData(data.Data.BookingInfo);
            }

            that.setData({
              loading:false
            })
          }).catch(function(e){
            console.log(e);
          })

          this.setData({
            loading:true,
            childrenNum:this.childrenNum,
            adultNum:this.adultNum
          })
      })


   },

   setBookingData:function(bookingInfo){
      let that=this;
      let departureDate= dateFormat.formatDay(new Date(bookingInfo.PkgProductInfo.PkgProduct_Schedule[0].DepartureDate));
      let departureCityName = bookingInfo.PkgProductInfo.DepartureTravelCityName;
      let destinationCityName = bookingInfo.PkgProductInfo.DestinationCityName;
      let contactInfo=this.contactInfo= bookingInfo.ContactInfo||{};
      let invoiceInfo=this.invoiceInfo= contactInfo.InvoiceInfo||{};
      this.isInternational = bookingInfo.PkgProductInfo.IsInternational;
      let segLeg=bookingInfo.PkgProductInfo.PkgProduct_Segment.length-1;
      this.lastDepartureTime=bookingInfo.PkgProductInfo.PkgProduct_Segment[segLeg].DepartureTime;
      //获取价格信息
      (bookingInfo.PackageProductPriceInfoList||[]).forEach(function(item){
        switch(item.PriceType){
          case 0:
            that.flightAndHotelPrice=item.TotalAmount;
            break;
          case 3:
            that.taxPrice=item.TotalAmount;
            break;
        }
      })
      let totalPrice=this.getTotalPrice();
      let passengerList=bookingInfo.PassengerInfoList;
      this.passengerInfo={
          productKey:this.productKey,
          passengerList:passengerList,
          selectedPassengerList:[],
          childrenNum:this.childrenNum,
          adultNum:this.adultNum,
          lastDepartureTime:this.lastDepartureTime,
          isInternational:this.isInternational
      };
      wx.setStorageSync('passengerInfo',this.passengerInfo);
      this.setData({
          productName:bookingInfo.PkgProductInfo.ProductName,
          departureDate:departureDate,
          departureCityName:departureCityName,
          destinationCityName:destinationCityName,
          totalPrice:totalPrice,
          flightAndHotelPrice:this.flightAndHotelPrice,
          taxPrice:this.taxPrice,
          contactName:contactInfo.ReceivingName||'',
          contactPhone:contactInfo.MobilePhone||'',
          contactEmail:contactInfo.Email||'',
          invoiceTitle:invoiceInfo.Title||'',
          invoiceAddress:invoiceInfo.DetailAddress||'',
          postCode:invoiceInfo.PostCode||'',
          invoicePhone:invoiceInfo.MobilePhone||'',
          invoiceName:invoiceInfo.Name||'',
          isInternational:this.isInternational,
          passengerList:[]
      })
   },
   getSelectedPassengerList:function(list,selectedIds){
      let that=this;

      return (list||[]).filter(function(item){
        return selectedIds.indexOf(item.ID)>-1;
      }).map(function(item){
        let passengerType=utils.isChild(new Date(item.Birthday),that.lastDepartureTime)?'儿童':(utils.isAdult(new Date(item.Birthday),that.lastDepartureTime)?'成人':'婴儿');
        let name =utils.getName(item);
        return {
          id:item.ID,
          name:name,
          cardType:item.CardType,
          CardNo:item.CardNo,
          passengerType:passengerType
        }
      })
   }
   ,
   refreshPassengerHandle:function(){
      var that=this;
      app.globalData.refreshPassenger=function(){
        let passengerInfo= wx.getStorageSync('passengerInfo');
        if(that.productKey==passengerInfo.productKey){
          that.passengerInfo=passengerInfo;
          let passengerList=passengerInfo.passengerList;
          let selectedPassengerList=passengerInfo.selectedPassengerList;
          that.setData({
            passengerList:that.getSelectedPassengerList(passengerList,selectedPassengerList)
          })
          app.globalData.refreshPassenger=null;
        }
      }
   }
   ,
   getTotalPrice:function(){
       let totalPrice= Math.floor(((this.flightAndHotelPrice||0)+(this.taxPrice||0)-(this.couponPrice||0))*100)/100;
       return totalPrice>0?totalPrice:0;
   },

   inputChangeHandle:function(e){
      var key=e.currentTarget.id;
      var data={};
      data[key]=e.detail.value;
      this.setData(data);
   },

   bindKeyInput: function(e) {
      this.inputChangeHandle(e);
   }
   ,
    //开关函数
   switch1Change: function (e){
     this.inputChangeHandle(e);
  },

   // 遮罩层
 showMask:function(e){
    //  console.log(e)
     this.setData({
     modalhidden:false
     })
   },
   hiddenMask:function(e){
     this.setData({
     modalhidden:true
     })
   },

  //  活动弹窗
  showactivity:function(e){
    console.log(e)
      this.setData({
      activityhide:false
     })
  },
  deleteHandle:function(e){
    let id=e.currentTarget.dataset.id;
    let that=this;
    utils.confirm('是否删除旅客？',function(res){
      if(!res.confirm)return;
      that.passengerInfo.selectedPassengerList=that.passengerInfo.selectedPassengerList.filter(function(item){
        return item!=id;
      })
      wx.setStorageSync('passengerInfo',that.passengerInfo);
      let passengerList=that.data.passengerList.filter(function(item){
        return item.id!=id;
      })
      that.setData({
        passengerList:passengerList
      })
    })
  },
  editHandle:function(e){
    this.refreshPassengerHandle();
    var id=e.currentTarget.dataset.id;
    wx.navigateTo({
      url:'../createTraveller/createTraveller?type=1&id='+id
    })
  },

  //选择
  catchTapHandle:function(){

  },
  verify:function(value) {
      var total = this.adultNum * 1 + this.childrenNum * 1,
          msg = '',
          selectedLists=[],
          billShow=this.data.hasInvoice,
          hasAgree=this.data.hasAgree;
      let passengerInfo= wx.getStorageSync('passengerInfo');
      if(this.productKey==passengerInfo.productKey){
        let passengerList=passengerInfo.passengerList;
        let selectedPassengerList=passengerInfo.selectedPassengerList;
        selectedLists= passengerList.filter((item)=>{
          return selectedPassengerList.indexOf(item.ID)>-1;
        })
      }

      if (this.isInternational) {
          msg = this.verifyInterPassener(selectedLists);
      }
      else {
          msg = this.verifyPassener(selectedLists);
      }

      if(!hasAgree){
        return '同意须知项方能进行下一步预定！';
      }
      else if (msg)
          return msg;
      else if (selectedLists.length < total) {
          msg = '选择的旅客人数不能小于出行人数！';
      }else if(!value.contactName){
          msg = '联系人姓名为空！';
      }else if(!utils.verifyName(value.contactName)){
          msg = '联系人姓名格式错误！';
      }else if (!value.contactPhone) {
          msg = '联系人手机号为空！';
      }else if (!utils.verifyPhone(value.contactPhone)) {
          msg = '联系人手机号格式错误！'
      }else if (!value.contactEmail){
          msg = '联系人邮箱为空！'
      }else if (!utils.verifyEmail(value.contactEmail)){
          msg = '联系人邮箱格式错误！';
      }else if (billShow && !utils.isChinaOrNumbOrLett(value.invoiceTitle)) {
          msg = '发票抬头为空或包含特殊字符！';
      }else if (billShow && ! value.invoiceName) {
          msg = '发票收件人为空！';
      }else if (billShow && !utils.verifyName(value.invoiceName)){
          msg = '发票收件人格式错误！'
      }else if (billShow && !value.invoicePhone) {
          msg = '收件人电话号码为空！';
      }else if (billShow && !utils.verifyPhone(value.invoicePhone)) {
          msg = '收件人电话号码格式错误！';
      }else if (billShow && !utils.isChinaOrNumbOrLett(value.invoiceAddress)) {
          msg = '地址为空或包含特殊字符！';
      }else if (billShow && !value.postCode) {
          msg = '邮政编码为空！';
      }else if (billShow && !utils.verifyPostCode(value.postCode)) {
          msg = '邮政编码格式不正确！';
      }
      return msg;
  },
  verifyInterPassener:function(passengerLists) {
      let msg = '',
          selectChild=0,
          selectAdult=0;
      passengerLists.some((item)=> {
          if(item.Birthday){
              let birDay=new Date(dateFormat.timestamp(item.Birthday,1)),
                  nowDate=new Date();
              if(utils.isChild(birDay,this.lastDepartureTime)){
                  selectChild++;
              }else if(utils.isAdult(birDay,this.lastDepartureTime)){
                  selectAdult++;
              }

          }

          if (!item.PassengerNameEN || item.PassengerNameEN == '/')
              msg = '英文名为空！';
          else if (item.CardType == null||item.CardType==0)//国际旅客没有身份证
              msg = '证件号码为空！';
          else if (!item.CardNo)
              msg = '证件号为空！';
          else if (!item.CheckCity) {
              msg = '签发地为空！';
          }
          else if (!item.CheckDate) {
              msg = '签发日期为空！';
          }
          else if (!item.PassportExpireDate) {
              msg = '证件有效期为空！';
          }
          else if (!item.CountryCode) {
              msg = '国籍为空！';
          }
          else if (!item.Birthday)
              msg = '生日为空！';
          else if(item.CardType==1&&!utils.varifyPassport(item.CardNo)){
              msg='护照格式错误，其由5-15位的字母和数字组成！';
          }else if(!utils.verifyName_2(item.PassengerName)){
              msg='中文姓名格式错误！';
          }

          if (msg) {
              msg = item.PassengerName + msg
              return true;
          }
      })
      if(!msg){
          if(selectChild==0&&selectAdult==0)
              msg='请您添加旅客！';
          else if(selectAdult!=this.adultNum)
              msg='成人人数不匹配,请修改后重新提交';
          else if(selectChild!=this.childrenNum)
              msg='儿童人数不匹配,请修改后重新提交';
      }

      return msg;
  },
  verifyPassener:function(passengerLists) {
    var msg = '',
        selectChild=0,
        selectAdult=0;
    passengerLists.some((item)=> {
        if(item.Birthday){
            let birDay=new Date(dateFormat.timestamp(item.Birthday,1)),
                nowDate=new Date();
            if(utils.isChild(birDay,this.lastDepartureTime)){
                selectChild++;
            }else if(utils.isAdult(birDay,this.lastDepartureTime)){
                selectAdult++;
            }
        }

        if (!item.PassengerName)
            msg = '中文名为空！';
        else if (item.CardType == null)
            msg = '证件类型为空！'
        else if (!item.CardNo)
            msg = '证件号为空！';
        else if (!item.Birthday)
            msg = '生日为空！';
        else if(item.CardType==1&&!utils.varifyPassport(item.CardNo)){
            msg='护照格式错误，其由5-15位的字母和数字组成！';
        }else if(!utils.verifyName_2(item.PassengerName)){
            msg='中文姓名格式错误！';
        }
        if (msg) {
            msg = item.PassengerNameEN + msg
            return true;
        }
    })
    if(!msg){
        if(selectChild==0&&selectAdult==0)
            msg='请您添加旅客！';
        else if(selectAdult!=this.adultNum)
            msg='成人人数不匹配,请修改后重新提交';
        else if(selectChild!=this.childrenNum)
            msg='儿童人数不匹配,请修改后重新提交';
    }

    return msg;
  },
  agreeChange:function(e){
    var key=e.currentTarget.id;
    var data={};
    data[key]=!this.data[key];
    this.setData(data);
  },

  //表单验证
  formBindsubmit:function(e){
    var value=e.detail.value;
    var msg=this.verify(value);
    if(msg){
      utils.message(msg);
    }else{
      app.globalData.afterLogin.then(()=>{
          let passengerInfo= wx.getStorageSync('passengerInfo');
          let selectedPassengerList=[];
          let hasInvoice=this.data.hasInvoice;
          let contactInfo=Object.assign({},this.contactInfo,{
              ReceivingName:value.contactName,
              MobilePhone:value.contactPhone,
              Email:value.contactEmail
          })
          let invoiceInfo;
          if(hasInvoice){
            invoiceInfo=Object.assign({},this.invoiceInfo,{
                DetailAddress:value.invoiceAddress,
                Name:value.invoiceName,
                MobilePhone:value.invoicePhone,
                Title:value.invoiceTitle,
                PostCode:value.postCode
            })
          }

          contactInfo.InvoiceInfo=invoiceInfo;

          if(this.productKey==passengerInfo.productKey){
              selectedPassengerList=passengerInfo.selectedPassengerList;
          }
          utils.loadingShow();
          if(this.loading)return;
          this.loading=true;
          app.post('api/Order/CreateOrder',{
            ProductKey: this.productKey,
            PassengerIDList: selectedPassengerList,
            ContactInfo: contactInfo,
            CouponIDList: [],
            CouponCodeList:[],
            Point:0
          }).then((data)=>{
            this.loading=false;
            if(this.isUnload)return;
            wx.hideToast();
            if(data.Code==4){
              app.login().then(()=>{
                utils.message('网络请求失败，请重新提交！');
              })
            }else if(data.Code==200){
              this.goPay(data.Data);
              let fn=app.globalData.reloadOrderList;
              if(typeof fn=='function'){
                setTimeout(fn,0);
              }
            }else if(data.Msg){
              utils.message(data.Msg);
            }
          }).catch((e)=>console.log(e))
      }).catch((e)=>console.log(e))
    }
  },
  goPay:function(data){
    wx.requestPayment({
      'timeStamp': data.TimeStamp,
      'nonceStr': data.NonceStr,
      'package': data.Package,
      'signType': data.SignType,
      'paySign': data.PaySign,
      success: ()=>{
        utils.message('支付成功！',function(){
          wx.switchTab({
            url: '../orderlist/orderlist'
          })
        })
      },
      fail: ()=>{
        utils.message('支付失败！');
      }
    })
  }
  ,
  showCostDetail(){
    this.setData({
      costDetail: {
        show: true
      }
    })
  },

  hideCostDetail(){
    this.setData({
      costDetail: {
        show: false
      }
    })
  },
  onUnload:function(){
    this.isUnload=true;
  }
})

下载地址：工程代码

作者 east

电商类 4月 1,2021

仿车源宝微信小程序代码

这是一款车辆交易平台。功能如下：

发布车源、户准寻车、我的订单、通知信息，车源管理、物流管理、车商金融、车市头条。

车源显示热门品牌，同时像微信通讯录一样按字母区分。

<view class="home-wrap">
  <swiper indicator-dots="true" autoplay="{{autoplay}}" duration="{{duration}}" interval="{{interval}}">
    <view wx:for="{{banner}}" wx:key="unique">
      <swiper-item>
        <view>
          <navigator url="{{item.target}}"><image src="{{item.image}}" mode="scaleToFill center" class="banner"></image></navigator>
        </view>
      </swiper-item>
    </view>
  </swiper>
  <view class="scroll-txt">
    <text class="scroll-ads">{{txtAds.title}}</text>
  </view>
  <view class="ads-list">
    <view class="ads-item" wx:for="{{advertise}}" wx:key="unique" wx:for-item="item">
      <image src="{{item.image}}" mode="scaleToFill center" class="sub-banner"></image>
    </view>
  </view>
  <view class="workbench">
    <text class="title">工作台</text>
    <view class="list">
      <view class="items">
        <image src="../../images/desk_publish@2x.png"></image>
        <text>发布车源</text>
      </view>
      <view class="items">
        <image src="../../images/desk_bid@2x.png"></image>
        <text>户准寻车</text>
      </view>
      <view class="items">
        <image src="../../images/desk_order@2x.png"></image>
        <text>我的订单</text>
      </view>
      <view class="items">
        <image src="../../images/desk_massage@2x.png"></image>
        <text>通知消息</text>
      </view>
    </view>
  </view>
  <view class="workbench">
    <text class="title">服务</text>
    <view class="list">
      <view class="items">
        <image src="../../images/home_car_source@2x.png" class="service-icon"></image>
        <text>车源管理</text>
      </view>
      <view class="items">
        <image src="../../images/home_logistical@2x.png" class="service-icon"></image>
        <text>物流管理</text>
      </view>
      <view class="items">
        <image src="../../images/home_finance@2x.png" class="service-icon"></image>
        <text>车商金融</text>
      </view>
      <view class="items">
        <image src="../../images/home_headlines@2x.png" class="service-icon"></image>
        <text>车市头条</text>
      </view>
    </view>
  </view>
</view>

下载地址：工程代码

作者 east

互联网类 3月 31,2021

语音跟读微信小程序代码

这个小程序是面向学生，学生可以听英语语音，然后跟读，把跟读录音提交到服务器。软件有增值部分，家长购买点评卡，老师可以对学生的发音进行点评。

//logs.js
var util = require('../../utils/util.js')
Page({
    progressTimer: null,
    data: {
        cs_id: 0,
        sub_cs_id: 0,
        readingInfo: [],
        '---音频相关---': '----',
        JFAudio: [],
        recording: false,
        currentProgress: 0
    },
    onPullDownRefresh: function () {
        wx.stopPullDownRefresh();
    },
    onLoad: function (obj) {
        //接收上一个页面传过来的参数
        if (obj && obj.sub_cs_id) {
            this.setData({
                cs_id: obj.cs_id,
                sub_cs_id: obj.sub_cs_id
            })
        }
    },
    onShow: function () {
        var that = this;
        that.getReadingInfo(function (data) {
            that.setData({
                readingInfo: data.readingInfo
            })
        })
    },
    getReadingInfo: function (cal) {
        var that = this;
        util.JFrequest({
            url: 'https://t.superabc.cn/c/os/reading/getreadinginfo',
            param : {
                'sub_cs_id': that.data.sub_cs_id,
                'cs_id': that.data.cs_id
            },
            success: function (res) {
                if (res && res.statusCode == 200 && res.data && res.data.code == 0) {
                    if (typeof cal == 'function') {
                        cal(res.data.data);
                    }
                } else {
                    console.log("请求数据失败，读取缓存");
                    //
                }
            }
        });
    },
    //点击提交作业
    tapSubmitReadingResult: function (e) {
        var that = this;
        var jfAudio = that.data.JFAudio;
        var audioUrlList = [];
        var len = jfAudio.length, successNum = 0;
        //如果音频数目不够，不让提交
        if (len < that.data.readingInfo.length) {
            wx.showToast({
                title: '请完成所有跟读再提交作业！',
                icon: 'success',
                duration: 1000
            });
            return false;
        }
        wx.showToast({
            title: '正在提交作业……',
            icon: 'loading',
            duration: 5000
        });
        for (var i = 0; i < len; i++) {
            (function (i) {
                console.log(jfAudio[i].tempFilePath);
                util.JFuploadfile({
                    url: 'https://t.superabc.cn/c/s/uploadwxappfile',
                    filePath: jfAudio[i].tempFilePath || '',
                    name: 'wx_file_' + i,
                    formData: {
                        'part_index': i,
                        'file_type': 3,
                        'file_prefix': 'wx_file_'
                    },
                    success: function (res) {
                        console.log(res);
                        var retData = JSON.parse(res.data);
                        if (retData && retData.code == 0) {
                            audioUrlList[i] = retData.data.url;
                            successNum++;
                        } else {
                            console.warn("上传失败！");
                        }
                        if (successNum == len) {
                            //加入跟读（报名 + 提交作业）
                            that.joinReading(audioUrlList, function (data) {
                                //提交作业成功，跳转到结果页
                                var record_id = data.joinRes.record_id;
                                wx.hideToast();
                                setTimeout(function () {
                                    wx.redirectTo({
                                        url: '../result/result?record_id=' + record_id
                                    });
                                },300);

                            });
                        }
                    }
                })
            })(i);
        }
    },
    //加入跟读
    joinReading: function (audioUrlList, cal) {
        var that = this;
        console.log(that.data.JFAudio);
        console.log(audioUrlList);
        util.JFrequest({
            url: 'https://t.superabc.cn/c/os/reading/joinreading',
            param: {
                'cs_id': that.data.cs_id,
                'sub_cs_id': that.data.sub_cs_id,
                'audio_list': audioUrlList
            },
            success: function (res) {
                if (res && res.statusCode == 200 && res.data && res.data.code == 0) {
                    if (typeof cal == 'function') {
                        cal(res.data.data);
                    }
                }else {
                    if(res.data.code == 600004){
                        wx.showToast({
                            title: res.data.err_msg,
                            icon: 'success',
                            duration: 500
                        });
                        setTimeout(function () {
                            wx.redirectTo({
                                url: '../course/course?cs_id=' + that.data.cs_id
                            });
                        },800);

                    }
                }
            },
            complete: function (res) {
                console.log(res);
            }
        });
    },
    //播放标准片段音
    tapPlayPartAudio: function (e) {
        var thisAudioId = 'partaudio-' + e.currentTarget.id;
        var thisAudioCtx = wx.createAudioContext(thisAudioId);
        thisAudioCtx.play();
    },
    emptyAudio: {
        'recording': null,
        'playing': null,
        'hasRecord': false,
        'tempFilePath': ''
    },
    //录音
    tapCompleteUserAudio: function (e, itemIndex) {
        var that = this;
        var readingItem;
        if (itemIndex) {
            readingItem = itemIndex;
        } else {
            readingItem = e.currentTarget.dataset.reading_item;
        }
        wx.stopRecord();
        that.updateJFAudio(readingItem, 'recording', false);
        that.setData({
            recording: false
        });
        clearInterval(that.progressTimer);
    },
    tapRecordUserAudio: function (e) {
        var that = this;
        var readingItem = e.currentTarget.dataset.reading_item;
        //当前所在页面
        var jfAudio = that.data.JFAudio;
        var curAudioModel = that.updateJFAudioModel(readingItem, jfAudio[readingItem]);
        //
        wx.showToast({
            title: '开始录音',
            icon: 'success',
            duration: 500
        });

        that.updateJFAudio(readingItem, 'recording', true);
        that.setData({
            recording: true
        });
        //更新进度条
        var size = 100;
        that.setData({
            currentProgress: 0
        });
        that.progressTimer = setInterval(function () {
            var num = Math.ceil(parseFloat(that.data.readingInfo[readingItem]['audio_duration']) * 1000);
            var newPro = that.data.currentProgress;
            newPro += size / num * 100;
            if (newPro >= 100) {
                that.setData({
                    currentProgress: 100
                });
                that.tapCompleteUserAudio(null, readingItem);
            } else {
                that.setData({
                    currentProgress: newPro
                });
            }

        }, size);
        //
        wx.startRecord({
            success: function (res) {
                that.updateJFAudio(readingItem, 'tempFilePath', res.tempFilePath);
                that.updateJFAudio(readingItem, 'hasRecord', true);
                //
                that.setData({
                    recording: false
                });
            },
            complete: function () {
                that.updateJFAudio(readingItem, 'recording', false);
                that.setData({
                    recording: false
                });
                clearInterval(that.progressTimer);
            },
            fail: function (err) {
                console.log(err);
            }
        })
    },
    //回放
    tapRePlayUserAudio: function (e) {
        var that = this;
        var readingItem = e.currentTarget.dataset.reading_item;
        //当前所在页面
        var jfAudio = that.data.JFAudio;
        wx.playVoice({
            filePath: jfAudio[readingItem].tempFilePath,
            success: function () {
                that.updateJFAudio(readingItem, 'playing', false);
            }
        })
    },

    //****封装一下**** start
    updateJFAudio: function (index, key, value) {
        var that = this;
        var jfAudio = that.data.JFAudio;
        jfAudio[index][key] = value;
        that.setData({
            JFAudio: jfAudio
        });
        return jfAudio;
    },
    updateJFAudioModel: function (index, model) {
        var that = this;
        var jfAudio = that.data.JFAudio;
        var _model = model || that.emptyAudio;
        jfAudio[index] = _model;
        that.setData({
            JFAudio: jfAudio
        });

        return _model;
    }
    //****封装一下**** end
});

下载地址：工程代码

作者 east

工具类 3月 30,2021

各国货币汇率微信小程序源代码

出国或做炒外汇时，要知道各国货币汇率。本小程序展示各个国家的国旗和国家名，点击其中一个国家时，可以实时知道当前这个国家的货币能换多少人民币。

//index.js
//获取应用实例
var util = require('../../utils/util.js')
var app = getApp()
 
Page({
  data: { 
    curDate: {},
    userInfo: {},
    myMainCur: {},
    mySelectCurs: {}
  },

  longtapFormSet: function(event) {
        var that = this

        wx.showActionSheet({
              itemList: ['设 '+event.currentTarget.dataset.text+' 为主货币？', '删除 '+event.currentTarget.dataset.text+'?'],
              success: function(res) {
                if (!res.cancel) {
                 if(res.tapIndex==0)
                 {
                      var temppp=that.data.myMainCur;

                      const length = that.data.mySelectCurs.length;
                      for (let i = 0; i < length; i++) 
                      {              
                          if(event.currentTarget.dataset.id==that.data.mySelectCurs[i].name)
                          {
                               that.data.myMainCur=that.data.mySelectCurs[i];
                               that.data.myMainCur.amount=temppp.amount;
                               that.data.mySelectCurs[i]=temppp;
                               break;
                           } 
                       }   
                       that.setData({
                                              mySelectCurs:that.data.mySelectCurs
                                  })   
                        that.setData({
                                              myMainCur:that.data.myMainCur
                                  })


                       wx.setStorage({
                                              key:"myMainCur",
                                              data:that.data.myMainCur
                       })

                       wx.setStorage({
                                              key:"mySelectCurs",
                                              data:that.data.mySelectCurs
                       })
                       
                     that.rateCount(that.data.myMainCur.amount);
                 }

                 if(res.tapIndex==1)
                 { 
                      wx.showModal({
                        title: '系统提示',
                        content: '确定要删除：'+event.currentTarget.dataset.text+'?',
                        success: function(res) {
                          if (res.confirm) {
                                  util.removeByValue(that.data.mySelectCurs,event.currentTarget.dataset.id);
                                          that.setData({
                                              mySelectCurs:that.data.mySelectCurs
                                  })

                                  wx.setStorage({
                                              key:"mySelectCurs",
                                              data:that.data.mySelectCurs
                                })
                          }
                        }
                      })
                 }
                }
              }
            })
  },

  //增加货币
  bindAddCur: function() {
      var thisUrl='../addCur/addCur'
      wx.navigateTo({
          url: thisUrl
      })
  },
  bindViewTap:function() {
  },

bindKeyInput: function(e) {
    var that = this
    that.data.myMainCur.amount=e.detail.value;
    wx.setStorage({
        key:"myMainCur",
        data:that.data.myMainCur
      })
      that.rateCount(that.data.myMainCur.amount);
    },

  rateCount: function(e) {
    var that = this
    // that.data.myMainCur.amount=e;
    // wx.setStorage({
    //     key:"myMainCur",
    //     data:that.data.myMainCur
    //   })

    const length = that.data.mySelectCurs.length;
    if(length>0)
    {
    var toss=that.data.mySelectCurs[0].name;
    for (let i = 1; i < length; i++) {
            toss=toss+","+that.data.mySelectCurs[i].name;
     }


    var jsonn=util.json2Form({
            "from":that.data.myMainCur.name,
            "tos":toss,
            "amount":e
            }); 

    var urll="https://wapp.talk-easy.cn/currency/getcurrencyrates?"+jsonn;

    console.info( 'urll:'+ urll); 

    wx.request( {  
      url:urll,  
     // data:jsonn,
      header: {  
        // 'Content-Type': 'application/json' 
     // "Content-Type": "application/x-www-form-urlencoded"  
      },  
      method: "GET",  
     
      success: function( res ) { 
          console.info(res.data );   
          for (let i = 0; i < length; i++) 
          {
             for (let j = 0; j < res.data.length; j++) 
             {
               if(res.data[j].name==that.data.mySelectCurs[i].name)
               {
                    that.data.mySelectCurs[i].rate=res.data[j].rate.toFixed(2);  
                    that.data.mySelectCurs[i].amount=res.data[j].amount.toFixed(2);  
                    continue;
               }
             }
          }

          that.setData({
            mySelectCurs:that.data.mySelectCurs
          })

          wx.setStorage({
              key:"mySelectCurs",
              data:that.data.mySelectCurs
          })
      },
      fail: function( res ) { 
          console.error( '网络请求失败' );   
      },
      complete: function( res ) {  
        if( res == null || res.data == null ) {  
            return;  
        }  
      }  
    }) 
   }
  }, 

 
  onLoad: function () {
    var that = this 

    that.setData({
          curDate:util.formatTime(new Date())
      }),
    //获取用户收藏的货币
    wx.getStorage({
          key: 'mySelectCurs',
          success: function(res) {
              that.setData({
                mySelectCurs:res.data
              })
          } 
        }),
    //获取用户主要的货币
    wx.getStorage({
          key: 'myMainCur',
          success: function(res) {
              that.setData({
                myMainCur:res.data
              })
          } 
        }),
 
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
          //更新数据
          that.setData({
            userInfo:userInfo
          })
      })

  },

  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
    //获取用户收藏的货币
    var that = this
      wx.getStorage({
          key: 'mySelectCurs',
          success: function(res) {
              console.info( "onShow:", res.data);
              that.setData({
                mySelectCurs:res.data
              })
          } 
        })
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下载地址：工程代码

作者 east

电商类 3月 28,2021

仿小红书购物推荐微信小程序

在这个工业发达社会，千千万万的商品存在信息过载，需要进行推荐。

功能：

商品图文，小清新风格

消息：动态显示用户喜欢某件商品。

<view class="wx-view_KHAWVZ" data-c_e_id="wx_viewb7dbd52e">
    <swiper autoplay="True" class="wx-swiper_Mn3JMs" data-c_e_id="wx_swiper43d9f094" indicator-dots="True" lower-threshold="50">
        <swiper-item class="c-full wx-swiper-item_F6vCx8" data-c_e_id="wx_swiper_item015a5cd2">
            <image bindtap="tap_d5808da3" class="wx-image_HsAX8s2" data-c_e_id="wx_image194006a3" mode="aspectFill" src="http://imgcdn.guoku.com/images/310/530f3b41bbe01ffa3a2a6292bd7a1a6b.jpg" style="background-image: url(http://imgcdn.guoku.com/images/310/530f3b41bbe01ffa3a2a6292bd7a1a6b.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; "/>
        </swiper-item>
        <swiper-item class="c-full wx-swiper-item_qGeJVI" data-c_e_id="wx_swiper_item1d2f7146">
            <image class="wx-image_HsAX8s2" data-c_e_id="wx_image735f46d5" mode="aspectFill" src="http://imgcdn.guoku.com/images/310/55ed0775d104b851e101d6d7ef658513.jpg" style="background-image: url(http://imgcdn.guoku.com/images/310/55ed0775d104b851e101d6d7ef658513.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; "/>
        </swiper-item>
    </swiper>
    <text class="c-block wx-text_V55JEt" data-c_e_id="wx_textbf43d609">日本姬弹簧草</text>
    <view class="wx-view_Ipiy3Y" data-c_e_id="wx_viewa6f000ae">
        <navigator class="wx-navigator_8s8V9p" data-c_e_id="wx_navigator66f8813b" hover-class="navigator-hover">
            <text class="c-block wx-text_EPMInA" data-c_e_id="wx_text50749bcb">￥167.00 去购买</text>
        </navigator>
        <view class="wx-view_q8yXI9" data-c_e_id="wx_view904ff1ed">
            <image class="wx-image_YAG40m" data-c_e_id="wx_image419ab42e" mode="aspectFit" src="http://qty83k.creatby.com/materials/origin/c5656ef00d38d89eae437c5a9102f8fa_origin.png" style="background-image: url(http://qty83k.creatby.com/materials/origin/c5656ef00d38d89eae437c5a9102f8fa_origin.png); background-size: contain; background-position: center center; background-repeat: no-repeat; "/>
        </view>
    </view>
    <view class="likelist" data-c_e_id="wx_view_4cc0358a">
        <navigator class="nav_likelistmore" data-c_e_id="wx_navigator_800a8601" hover-class="navigator-hover">
            <text class="c-block wx-text_t7lDiK" data-c_e_id="wx_textfcc12486">214人喜欢</text>
            <text class="c-block wx-text_t7lDiK2" data-c_e_id="wx_texted258fa6">❯</text>
        </navigator>
        <view class="uselinklist" data-c_e_id="wx_view_ccf230eb">
            <navigator class="nav_userlink" data-c_e_id="wx_navigator1586a87e" hover-class="navigator-hover">
                <view class="likeuser" data-c_e_id="wx_view2a69167c">
                    <image class="useravatar" data-c_e_id="wx_image96c6f1ad" mode="aspectFill" src="http://imgcdn.guoku.com/avatar/large/e1786c6ae7425a1dff35caf9612e2130" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(http://imgcdn.guoku.com/avatar/large/e1786c6ae7425a1dff35caf9612e2130); "/>
                </view>
            </navigator>
            <navigator class="nav_userlink" data-c_e_id="wx_navigatore7153e65" hover-class="navigator-hover">
                <view class="likeuser" data-c_e_id="wx_view7e9222ed">
                    <image class="useravatar" data-c_e_id="wx_imagea98d5f82" mode="aspectFill" src="http://imgcdn.guoku.com/avatar/50/large_125585_7fcdf62b995e69860ce24726ec645496.jpg" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(http://imgcdn.guoku.com/avatar/50/large_125585_7fcdf62b995e69860ce24726ec645496.jpg); "/>
                </view>
            </navigator>
            <navigator class="nav_userlink" data-c_e_id="wx_navigator223d3249" hover-class="navigator-hover">
                <view class="likeuser fm2" data-c_e_id="wx_view90e01b37">
                    <image class="useravatar" data-c_e_id="wx_imagedf491a62" mode="aspectFill" src="http://imgcdn.guoku.com/avatar/50/681eb4e30ac36d9481ea421c3fc61c6b.jpg" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(http://imgcdn.guoku.com/avatar/50/681eb4e30ac36d9481ea421c3fc61c6b.jpg); "/>
                </view>
            </navigator>
            <navigator class="nav_userlink" data-c_e_id="wx_navigator29a940dd" hover-class="navigator-hover">
                <view class="likeuser fm05" data-c_e_id="wx_viewa0e6dba2">
                    <image class="useravatar" data-c_e_id="wx_imageecdb2d3d" mode="aspectFill" src="http://imgcdn.guoku.com/avatar/50/0395a843ff604331e61571375e2bb602.jpg" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(http://imgcdn.guoku.com/avatar/50/0395a843ff604331e61571375e2bb602.jpg); "/>
                </view>
            </navigator>
            <navigator class="nav_userlink" data-c_e_id="wx_navigatora9244556" hover-class="navigator-hover">
                <view class="likeuser" data-c_e_id="wx_view18aad916">
                    <image class="useravatar" data-c_e_id="wx_image10b66a3c" mode="aspectFill" src="http://imgcdn.guoku.com/avatar/50/large_223609_a9ef3adbd523a0e2515b76e7ac82be72.jpe" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(http://imgcdn.guoku.com/avatar/50/large_223609_a9ef3adbd523a0e2515b76e7ac82be72.jpe); "/>
                </view>
            </navigator>
            <navigator class="nav_userlink" data-c_e_id="wx_navigatorf2373b98" hover-class="navigator-hover">
                <view class="likeuser" data-c_e_id="wx_view3ee2d903">
                    <image class="useravatar" data-c_e_id="wx_image43f6f60b" mode="aspectFill" src="http://imgcdn.guoku.com/avatar/128/589c0d8d2966eb20241a61564676b7f7.jpg" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(http://imgcdn.guoku.com/avatar/128/589c0d8d2966eb20241a61564676b7f7.jpg); "/>
                </view>
            </navigator>
            <navigator class="nav_userlink" data-c_e_id="wx_navigator78832b6c" hover-class="navigator-hover">
                <view class="likeuser" data-c_e_id="wx_view459d4944">
                    <image class="useravatar" data-c_e_id="wx_image09c11da9" mode="aspectFill" src="http://wx.qlogo.cn/mmopen/8uZyJIhsB4vLnWuKcuGZ1ag4uzVYgo3axoeQo75TibADQibSrCNLgFnLsSoXKB740r1qhWShAkeY65DXxSPudkjherh4dM9enx/0" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(http://wx.qlogo.cn/mmopen/8uZyJIhsB4vLnWuKcuGZ1ag4uzVYgo3axoeQo75TibADQibSrCNLgFnLsSoXKB740r1qhWShAkeY65DXxSPudkjherh4dM9enx/0); "/>
                </view>
            </navigator>
        </view>
    </view>
    <view class="commentlistwrap" data-c_e_id="wx_view_c359400f">
        <view class="wx-view_8NFuqw" data-c_e_id="wx_view_664566c4">
            <text class="c-block wx-text_t7lDiK" data-c_e_id="wx_text68f182cf">2人点评</text>
        </view>
        <view class="commentlistitem" data-c_e_id="wx_view_16d0f86f">
            <navigator class="nav_userlink" data-c_e_id="wx_navigator2ffed891" hover-class="navigator-hover">
                <view class="likeuser fm2" data-c_e_id="wx_viewd34d457a">
                    <image class="useravatar" data-c_e_id="wx_image7b2bd094" mode="aspectFill" src="http://imgcdn.guoku.com/avatar/50/681eb4e30ac36d9481ea421c3fc61c6b.jpg" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(http://imgcdn.guoku.com/avatar/50/681eb4e30ac36d9481ea421c3fc61c6b.jpg); "/>
                </view>
            </navigator>
            <view class="c-minheight wx-view_WnUrtw" data-c_e_id="wx_view_66505bdf">
                <view class="wx-view_F9ISUC" data-c_e_id="wx_view27217bec">
                    <navigator class="wx-navigator_wTcTS2" data-c_e_id="wx_navigator70eae9f8" hover-class="navigator-hover">
                        <text class="wx-text_71u3gA" data-c_e_id="wx_text5fe6919d">木芽</text>
                    </navigator>
                    <view class="wx-view_wrkAD7" data-c_e_id="wx_view_53be94ea">
                        <image class="wx-image_YoXk15" data-c_e_id="wx_image_d1caf161" src="http://qty83k.creatby.com/materials/origin/53a095f5786a4f0e1e50eea5ec5c84bc_origin.png"/>
                    </view>
                </view>
                <text class="c-block wx-text_kGXxsa" data-c_e_id="wx_text_39bacddb">在植觉买过东西，每一件都是用心之作。很喜欢植觉的调调，不争不抢。今天在这个app上无意中也看到了植觉小物，小确幸顿时溢满心间</text>
                <view class="comment_operate" data-c_e_id="wx_view_cf5ce19f">
                    <view class="wx-view_h6iSr9" data-c_e_id="wx_view3a8d0d4f">
                        <view class="commentlikebtn" data-c_e_id="wx_viewb3b5b6f1">
                            <image class="wx-image_YoXk15" data-c_e_id="wx_image0736d1e2" src="http://qty83k.creatby.com/materials/origin/2459ad45d8071985f1cf7f91f3b3df66_origin.png"/>
                        </view>
                        <view class="commentreplybtn" data-c_e_id="wx_view9909114c">
                            <image class="wx-image_YoXk15" data-c_e_id="wx_imagef86ae815" src="http://qty83k.creatby.com/materials/origin/0564a45ab780222757935674e13d6919_origin.png"/>
                        </view>
                    </view>
                    <text class="listitem_creattime" data-c_e_id="wx_text8c8804b3">2016.10.29</text>
                </view>
            </view>
        </view>
        <view class="commentlistitem" data-c_e_id="wx_view4daafd3b">
            <navigator class="nav_userlink" data-c_e_id="wx_navigator4581cf51" hover-class="navigator-hover">
                <view class="likeuser fm3" data-c_e_id="wx_view94910b5d">
                    <image class="useravatar" data-c_e_id="wx_imaged4532b14" mode="aspectFill" src="http://imgcdn.guoku.com/avatar/128/589c0d8d2966eb20241a61564676b7f7.jpg" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url(http://imgcdn.guoku.com/avatar/128/589c0d8d2966eb20241a61564676b7f7.jpg); "/>
                </view>
            </navigator>
            <view class="c-minheight wx-view_WnUrtw" data-c_e_id="wx_viewc808f6b9">
                <view class="wx-view_F9ISUC" data-c_e_id="wx_view54c5a204">
                    <navigator class="wx-navigator_wTcTS2" data-c_e_id="wx_navigator9e12243f" hover-class="navigator-hover">
                        <text class="wx-text_71u3gA" data-c_e_id="wx_textf720176a">UPUP</text>
                    </navigator>
                    <view class="wx-view_wrkAD7" data-c_e_id="wx_viewd862c378"/>
                </view>
                <text class="c-block wx-text_kGXxsa" data-c_e_id="wx_texte7f2518b">所以说包装多重要，你普通卖花的能把弹簧草卖到这个价格吗？呵呵……</text>
                <view class="comment_operate" data-c_e_id="wx_view1ec2d46b">
                    <view class="wx-view_h6iSr9" data-c_e_id="wx_view126a4c3a">
                        <view class="commentlikebtn" data-c_e_id="wx_viewe2d39273">
                            <image class="wx-image_YoXk15" data-c_e_id="wx_image696d6d8f" src="http://qty83k.creatby.com/materials/origin/2459ad45d8071985f1cf7f91f3b3df66_origin.png"/>
                        </view>
                        <view class="commentreplybtn" data-c_e_id="wx_view5c7d06ea">
                            <image class="wx-image_YoXk15" data-c_e_id="wx_image23cd763a" src="http://qty83k.creatby.com/materials/origin/0564a45ab780222757935674e13d6919_origin.png"/>
                        </view>
                    </view>
                    <text class="listitem_creattime" data-c_e_id="wx_text7a845479">2016.10.29</text>
                </view>
            </view>
        </view>
        <button bindtap="tap_3013baf2" class="wx-button_KajNFH" data-c_act_id="M_c9c3eaf9a5124a1b" data-c_e_id="wx_button86aaad14" hover-class="button-hover" size="default" type="default">
            写点评
        </button>
    </view>
</view>
<view bindtap="tap_3ec69114" class="modalview {{wx_view_74a0d568.class}}" data-c_e_id="wx_view_74a0d568">
    <view bindtap="tap_22930b74" class="wx-view_m9HByj" data-c_e_id="wx_view_5a2e85c5">
        <view class="bottomGrayboder wx-view_vLuOu2" data-c_e_id="wx_view9b1b510b">
            <view bindtap="tap_e2bd485d" class="_other_text_d8PEVm" data-c_act_id="M_60265ef02e4cfe9b" data-c_e_id="_other_texta33bfdda">
                ×
            </view>
        </view>
        <textarea class="c-block c-fullwidth wx-textarea_9pwDc5" data-c_e_id="wx_textarea_ab411ba2" name="textarea1" placeholder="请输入点评" type="textarea"/>
        <button bindtap="tap_d6c84484" class="wx-button_V2eIJ4" data-c_act_id="M_17d89e86c5b99fa2" data-c_e_id="wx_button_84416317" hover-class="button-hover" size="mini" type="default">
            点 评
        </button>
    </view>
</view>

下载地址：工程代码

作者 east

分类归档小程序代码