python 微信小程序 英语单词小程序代码分享

应老铁要求，分享一下英语单词小程序代码，这个小程序由两部分组成，微信小程序是一块，odoo平台做为后台是一块。

 

小程序的代码，index如下：

index

js:

// pages/index/index.js
var api = require('../../utils/api.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    fxrid:0,
    username:'',
    userpic:'',
    jtwcs:0,
    // ywcjd:0,/** 已完成进度在进行每天daydcarr设置时显示  刷新时与设置时还需保存选取的关卡id,完成多少，每天 */
    zjindu:0,
    jchts:0,
    bgdcs:0,
    zuyuan:[],
    btwc:false, /**本关完成 */
    bgwc:false, /**本天完成 */
    buttonbt:'开始学习'

  },
  // 精减上报单词信息
  mysbwcdc:function(dcarr){
    var jgarr=[]
    for(let j = 0,len=dcarr.length; j < len; j++) {
       var temp={ id: dcarr[j].id, rccs: dcarr[j].rccs,rdcs:dcarr[j].rdcs,xccs: dcarr[j].xccs,xdcs:dcarr[j].xdcs}
       jgarr.push(temp)
    }
    return jgarr
  },
  //上报更新后所做之事
  callshangb:function(jg){
    // console.log('callback 上报后更新',jg)
    wx.setStorageSync('wchdcarr', [])
    wx.setStorageSync('daydcarr', [])
    wx.setStorageSync('czls', [])
    wx.setStorageSync('gkdate', api.formatdate(new Date()))
    api.myhttpgetcall(api.apiPath.getzuyan,{uid: wx.getStorageSync('userbzid'),bz:'getzuyuan'},this.callshuaxzy)
  },
  // 完成上报单词更新
  wcsbdcgx:function(){
      //完成任务，更新服务器，完成单词，操作历史，清空单词，但不清空今天完成数，同时注意退出时把没完成的更新服务器
        // 一天任务完成，上传，清空，daydcarr,zudcarr,lianxi,czls dkdate,上传参数，czls,wcarr
        let sbwcdc= this.mysbwcdc(wx.getStorageSync('wchdcarr'))  /**上报完成单词 */
        // console.log(url)
        api.myhttppostcall(api.apiPath.daywcgx,{
                          wcdc: JSON.stringify(sbwcdc),
                          czls: JSON.stringify(wx.getStorageSync('czls')),
                          uid:wx.getStorageSync('userbzid')
                        },this.callshangb)
        
  },
  // callback 刷新组员
  callshuaxzy:function(jg){
    // console.log('callback 刷新组员',jg)
    let ddcs = parseInt(wx.getStorageSync('daydcs'))||20 
    this.setData({
      zuyuan: jg.data,
      jchts:jg.ts, /**调整后台，数据传递过定，今天完成数，及坚池天数 userpic */ 
      bgdcs:jg.bgdcs           
    })
    wx.setStorageSync('zuyuan', jg.data)
    wx.setStorageSync('bgdcs', jg.bgdcs)              
    let ddcarr=jg.wordarr.slice(0,ddcs)
    let temwordarr = jg.wordarr.splice(0,ddcs)
    wx.setStorageSync('wordarr', temwordarr)
    wx.setStorageSync('daydcarr', ddcarr)
    wx.setStorageSync('chongzhibz', false)
  },
  onShow: function () {     
    let ddcs = parseInt(wx.getStorageSync('daydcs'))||20 
    if (wx.getStorageSync('gkdate')!=api.formatdate(new Date())){
      // console.log('当天单词')
      if (wx.getStorageSync('daydcarr').length==0){
        // console.log('没有建本关单词')
        let dcarr=wx.getStorageSync('wordarr')       
        // console.log(ddcs)
        var dgkarr = []
        if (ddcs<dcarr.length){
          dgkarr = dcarr.slice(0,ddcs)
          dcarr.splice(0,ddcs)          
        }
        else{
          dgkarr =dcarr.slice(0,)
          dcarr = []
        }
        if (dgkarr.length>0){
          wx.setStorageSync('daydcarr', dgkarr)
          wx.setStorageSync('wordarr',dcarr)
          wx.setStorageSync('cid', 0)
          wx.setStorageSync('gkdate', api.formatdate(new Date()))
        }        
      }      
    } 
    if (wx.getStorageSync('wchdcarr')){
      let wcs=wx.getStorageSync('wchdcarr').length
      // console.log(wcs)
      if (wcs>=ddcs){ 
        this.setData({btwc:true})               
      }
      if (wx.getStorageSync('wordarr').length==0){
        this.setData({bgwc:true })
      } 
      if (this.data.btwc || this.data.bgwc){
        this.wcsbdcgx()         
      }
      let zjd = wcs/parseInt(wx.getStorageSync('bgdcs'))*100
      // console.log(zjd)
      this.setData({ jtwcs:wcs,  /**今天完成数 */
        zjindu:zjd
      })
    }
    // 重置    
    if (wx.getStorageSync('chongzhibz')){
      console.log('重置')
      if (wx.getStorageSync('userbzid')){
        api.myhttpgetcall(api.apiPath.getzuyan,{uid: wx.getStorageSync('userbzid'),bz:'getzuyuan'},this.callshuaxzy)
      }
    }
  },
  // 转计划主页
  zhuanjh: function(data){
    if (!data) {
      return;
    }
    if (data.confirm) {
      wx.navigateTo({        
        url: '/pages/jihua/jihua',
      })
    }
  },
  // 开始学习
  starstudy:function(){
    // console.log('开始学习')
    if (this.data.bgwc){
      api.myshowm('祝贺','祝贺你的单词量有了标志性进展，你又向成功迈进了一大步！请再找一个目标','确定')
      wx.setStorageSync('chongzhibz', true)
     }
    else{
      if (this.data.btwc){
        api.myshowm('祝贺','祝贺你又坚持了一天，有付出必定有回报，继续加油，你又向成功迈进了一大步！','确定')
        wx.setStorageSync('chongzhibz', true)
        // api.myhttpgetcall(api.apiPath.getzuyan,{uid: wx.getStorageSync('userbzid'),bz:'getzuyuan'},this.callshuaxzy)
      }
      else{
        // 确定7个单词组，14个任务
        // {dc,xu[],key,yes,lx} 从日计化中取出7个单词zudcarr,daydcarr
        // console.log('开始')
        var darr=wx.getStorageSync('daydcarr')
        let ddcs = parseInt(wx.getStorageSync('daydcs'))
        var zudcarr = wx.getStorageSync('zudcarr')||[]
        // console.log('开',darr,ddcs,zudcarr)
        if (darr.length==0){          
          let wcdc=wx.getStorageSync('wchdcarr')   /**清空后，daydcs,wchdcarr都为0，也相等 */   
          if (wcdc){
            // console.log('fgi',wcdc.length)
            if  (wcdc.length>=ddcs){ 
              this.wcsbdcgx()
              api.myshowm('祝贺','祝贺你又坚持了一天，有付出必定有回报，继续加油，你又向成功迈进了一大步！','确定')
            }
          }
          else{
            api.myshowok('提示','还没选择单词，请先进行单词设置',this.zhuanjh)
          }

        }
        else{
          if (zudcarr==0){
            if (darr.length>7){
              zudcarr = darr.slice(0,7)
              darr.splice(0,7) 
            }
            else{
              zudcarr =darr.slice(0,)
              darr = []
            }
            wx.setStorageSync('daydcarr', darr)
            wx.setStorageSync('zudcarr',zudcarr)
            wx.setStorageSync('lianxiarr', [])
            wx.navigateTo({url:'/pages/liuword/liuword'})
          }else{
            // console.log('进入学习界面')
            wx.navigateTo({url:'/pages/liuword/liuword'})
          }
        } 
      }
    }
      
  },  
  test:function(){
    let cs=[{id: 1087, word: "dinner", zhongwen: "晚餐;正餐", yinbiao: "[dinə]", cixing: "n.", tedian: false,word: "dinner",
    yinbiao: "[dinə]",zhongwen: "晚餐;正餐",juzy:'It is an impressive achievement.',juzz:'这是一项令人敬佩的成就。'},
    {id: 1087, word: "dinner", zhongwen: "晚餐;正餐", yinbiao: "[dinə]", cixing: "n.", tedian: false,word: "dinner",
    yinbiao: "[dinə]",zhongwen: "晚餐;正餐",juzy:'It is an impressive achievement.',juzz:'这是一项令人敬佩的成就。'}
  ]
    wx.navigateTo({
      url:'/pages/word/zongjie?csdata='+JSON.stringify(cs)+'&cid=2'
    })
  },
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (!wx.getStorageSync('daydcs')){
      wx.setStorageSync('daydcs', 20)
    }
    this.setData({
      buttonbt:wx.getStorageSync('buttonbt')||'开始学习'
    })   
    //  load 不管chongzhibz,show里加上重置
    if (wx.getStorageSync('userbzid')){
        wx.request({
          url: api.apiPath.getzuyan,
          data:
          {
            uid: wx.getStorageSync('userbzid'),
            bz:'getzuyuan'
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          method: "GET",
          success: fres => {        
            if (fres.data.data){
              this.setData({
                zuyuan: fres.data.data,
                jchts:fres.data.ts, /**调整后台，数据传递过定，今天完成数，及坚池天数 userpic */                
                bgdcs:fres.data.bgdcs           
              })
              wx.setStorageSync('zuyuan', fres.data.data)
              wx.setStorageSync('bgdcs', fres.data.bgdcs)  /**本关单词数 */
              wx.setStorageSync('wordarr', fres.data.wordarr)
              // wx.setStorageSync('chongzhibz', false)
            }               
          }
        });
    
      }    
    
    if (JSON.stringify(options) !='{}'){
      wx.setStorageSync('fxrid', options.fbzid)
      var zdbz=''
      if (options.bz="zd"){
        zdbz="zd"
      }
      if (wx.getStorageSync('userbzid')) {
        api.myhttpget(api.apiPath.fenxiang,{
          uid: wx.getStorageSync('userbzid'),
          fxrid:options.fbzid,
          bz:zdbz,
          fxcs:options
        })

      }     
    }
    
   },  
 
  //分享至群
  onShareAppMessage(res) {
    let vid=wx.getStorageSync('userbzid')
    if (res.from=="button"){
      // console.log('组队');
      api.fenxiang('zd',vid)
      return {
        title: '快快乐乐一起学单词',
        path: '/pages/index/index?fbzid='+vid+'&bz="zd"',
        success: function(res) {          
        }
      }
    }
    else{
      // console.log('非组队w');
      api.fenxiang('fzd',0)
      return {
        title: '快快乐乐一起学单词',
        path: '/pages/index/index?fbzid='+vid+'&bz="ggfx"',
        success: function(res) {
          // console.log('分享');
        }
      }
    }
    
  },
  // 分享到朋友圈 imageUrl:'分享链接图片',query: 'uid=3'
  onShareTimeline: function() {
    return {
      title: '咱们一起快乐学英语',     
      path: '/pages/index/index',
      query:'fbzid='+vid+'&bz="qunfx"'
    }
  },

  // 单词设置 
  dcset:function(){
    wx.navigateTo({
      url: '/pages/jihua/jihua'
    })
  }

})

wxml:

<!--pages/index/index.wxml-->

<view class="content">
  
  <view class="shu">   
    <button class="buttonzy" open-type="share">+组队</button>
    <view class="zuyan">      
      <block wx:for="{{zuyuan}}" wx:key="key" wx:for-item="item" wx:for-index="idx">       
          <view class="userinfo">
              <image class="userinfo-avatar" src="{{item.userpic}}" background-size="cover"></image>
              <!-- <text >{{item.name}}</text> -->
              <text class='fs'>{{item.chj}}</text>
              <text class='fs'>{{item.zdcs}}</text>
          </view>
      </block>       
    </view> 
    
    <view class="titou">  
      <view class="hengjh">
        <text class="benguanjh">本关单词数:  {{bgdcs}}</text>
        <view class="jhbutton" bindtap="dcset">
          <image class="jhimage" src="./../images/myicon/msetting.png" ></image>
          <text class="jhtext">单词设置</text>
        </view>
      </view>
      <progress class="jindu" percent="{{zjindu}}" color="#0af" stroke-width="3"></progress>
      <view class="brcj">
        <view class="wcs">          
          <image class="chjimage" src="./../images/myicon/tians.png" ></image>
          <view>{{jtwcs}}</view>
          <view><text>今天完成数</text></view>
        </view>
        <view class="tians">
          <image class="chjimage" src="./../images/myicon/rl.png" ></image>
          <view>{{jchts}}</view>
          <view><text>已坚持天数</text></view>
        </view>
      </view>
    </view>

    <button class="buttonstudy"   bindtap="starstudy">{{buttonbt}}</button>
    <!-- <button class="buttonstudy"   bindtap="test">测试</button> -->
    <!-- <view class="network_info_btn">
            <button size="mini" type="primary" plain bindtap="getNetworkType">组队</button>
            <button size="mini" type="warn" plain bindtap="clear">清空</button>
        </view> -->
  </view>


</view>

wxss:

* pages/index/index.wxss */

.zuyan{
    display: flex;
    margin:20rpx;
    flex-direction:row;       
    align-items:center; 
    justify-content: space-around;
}
.buttonzy{
  /* display: flex; */  
  /* background-color:aliceblue; */
  border:2rpx solid #0af;
  font-size:40rpx;
  color:#0af;
  border-radius: 0rpx 0rpx 100rpx 100rpx;
}

.network_info_btn {
  margin-top: 10rpx;
  display: flex;
}
.userinfo {
  margin-top:20rpx;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: space-around;
  align-items:center;
  /* border:3rpx solid rgb(184, 201, 209) */
  width:100rpx;
  color:rgb(123, 134, 139);
  /* border: 3ps solid #5b0ab8; */
  border-radius:  0rpx 0rpx 100rpx 100rpx;
  box-shadow: 0px 0px 1px 1px rgb(184, 201, 209);
}
.fs {
  margin-top:35rpx;
  /* margin-left:30rpx; */
  /* width:200rpx; */
  /* border:3rpx solid rgb(184, 201, 209) */
}
.jh {
  /* margin: 5rpx; */
  color:red;
  border:3rpx solid rgb(184, 201, 209)
}

.userinfo-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  /* margin-top:2rpx; */
  /* min-width: 128rpx;
  min-height: 128rpx; */
  /* border:3rpx solid rgb(184, 201, 209) */
}

.titou {
  padding-top:20rpx;
  margin:50rpx;
  height:400rpx;
  /* width:700rpx; */
  color:rgb(123, 134, 139);
  border-radius: 20rpx;
  /* background-color: #0af; */
  border:3rpx solid rgb(184, 201, 209);
  align-items: center;
  /* justify-content: space-between; */
}
.hengjh { 
  padding:10rpx;  
  /* border:3rpx solid #0af; */
  display:flex;
  direction: row;
  align-items: center;
  justify-content: space-between;
  /* justify-content:left; */
}
.benguanjh {
  height:50rpx;
  /* padding-left:30rpx; */
  margin-left:25rpx;
  font-size: 30rpx;  
  /* border:3rpx solid rgb(184, 201, 209); */
  display:flex;
  align-items: center;
  align-content: center;
}
.jindu {
  margin:25rpx;
  border:3rpx solid rgb(184, 201, 209)
}
.jhbutton { 
  padding:10rpx;
  /* margin-left:10rpx; */
  width:200rpx;
  height:40rpx;
  margin-left:20rpx;
  border:3rpx solid #0af;
  /* background-color: rgb(236, 232, 190); */
  font-size: 30rpx;
  border-radius: 25rpx;
  align-items: center;
  align-items:center;
  /* justify-content:left; */
}
.jhimage {
  margin-left:15rpx;
  width: 35rpx;
  height:35rpx;
}
.jhtext {
  margin-left: 20rpx;
  /* height:30rpx; */
}

.buttonstudy{
  /* display: flex; */  
  /* background-color:aliceblue; */
  border:2rpx solid #0af;
  font-size:40rpx;
  color:white;
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  background-color: #0af;
}

.brcj {
  display:flex;
  flex-direction: row;
  align-items: left;
  justify-content: space-around;
  /* color:#0af; */
}
.wcs {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width:200rpx;
  /* border:3rpx solid rgb(184, 201, 209) */
}
.tians {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width:200rpx;
  height:248rpx;
  /* color:#0af; */
  /* border:3rpx solid rgb(184, 201, 209) */
}

.chjimage {  
  width: 80rpx;
  height:80rpx;
}