简单的原生微信小程序项目

概述

简单的微信小程序项目，供大家新手参考学习

详细

1，登录页面

htmld代码片段

html代码片段

<view class="login">

  <view class="logintext">体育产品</view>

  <view bindtap="getUserclick"  class="btnlogin">

   <text>授权微信登录</text>

  </view>

</view>

js代码片段，主要让用户登录

  getUserclick(e){

    wx.getUserProfile({

      desc:'用户完善资料',

      success:(res)=>{

        wx.navigateTo({

          url:'/pages/binBanji/binBanji'

        })

      }

    })

  },

2，原生js写的下拉框选择

2，原生js写的下拉框选择

htmld代码片段

 

<view class="quanbu">
  <text class="banji">绑定学校班级</text>
  <view class="zhengti">
    <view class="textbin">
      <view>选择学校</view>
      <view class="textbj">
        <view bindtap="selectToggle">
          <text>{{text}}</text>
        </view>
         
        <view wx:if="{{show}}" class="binhov">
          <view class="textlet" wx:for="{{textArray}}"  wx:key='index'>
            <text class=" {{counter==index?'avtive':''}}" data-index="{{index}}" bindtap="showText">{{item}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="tianxie">
      填写班级码 <input type="text" bindinput="bindKeyInput" placeholder="请输入班级码"/>
    </view>
    <view class="queding">
      <text bindtap="selectTo">确定绑定</text>
    </view>
  </view>
</view>

js代码片段

data:{
    show:false,
    text:'成都七中',
    textArray:['成都七中','成都四中','榆林小学'],
    counter:0,
    nume:''
  },
  bindKeyInput(e){
   this.data.nume = e.detail.value
   console.log(this.data.nume)
  },
  selectTo(){
    if(!this.data.nume){
      return console.log('请填写内容')
    }else{
      wx.navigateTo({
        url: '../home/home',
      })
    }
   
  },
 
  //控制show隐藏和显示
  selectToggle(){
      let showText = this.data.show
      this.setData({
        show:!showText
      })
  },
  //设置内容
  showText(e){
    // console.log(e)
    let nowData = this.data.textArray //获取data数据里面的textArray
    let index = e.target.dataset.index //当前点击的索引值
    let newText = nowData[index] //当前点击的内容
    this.setData({
      show:false,
      text:newText,
      counter:index
    })
  }

3，主页

html代码片段

<view class="zhengi">
  <view>
    <swiper indicator-dots='true' indicator-color='rgba(0, 0, 0, .2)' indicator-active-color='#cccccc' autoplay='true'
      circular='true' class="homedefa">
      <swiper-item>
        <image class="default" src="/images/u37.png" mode='aspectFit' />
      </swiper-item>
      <swiper-item>
        <image class="default" src="/images/u37.png" mode='aspectFit' />
      </swiper-item>
      <swiper-item>
        <image class="default" src="/images/u37.png" mode='aspectFit' />
      </swiper-item>
    </swiper>
  </view>
 
 
  <view class="yundonng">
    <navigator url="/pages/home/component/clocking" class="show">
      <image src="/images/yundong.svg"></image>
      <view class="test">运动打卡</view>
    </navigator>
    <navigator url="/pages/home/component/Calendar/Calendar">
      <image src="/images/rili.svg"></image>
      <view class="test">运动日历</view>
    </navigator>
    <view>
      <image src="/images/paihang.svg"></image>
      <view class="test">运动排行榜</view>
    </view>
  </view>
 
  <view>
    <navigator url="/pages/home/guidance/guidance" class="Action">
      <text>动作指导</text>
      <text>跟多></text>
    </navigator>
 
    <navigator class="dowload" url="/pages/home/Details/detailsitem/detailsitem">
      <image src="/images/download1.png"></image>
      <view class="imgae">
        <image src="/images/u23.svg"></image>
      </view>
      <view class="homeSitUp">
        <view class="qianqu">
          <text>坐立体前屈</text>
          <text class="situp">指导老师：谢宏</text>
        </view>
        <view class="tupian">
          <image src="/images/zhenbang.svg"></image>
          <text>32</text>
          <image src="/images/ship.svg"></image>
          <text>32</text>
        </view>
      </view>
    </navigator>
  </view>
 
  <view class="tophome">
    <navigator class="dowload" url="/pages/home/Details/detailsitem/detailsitem">
      <image src="/images/download.png"></image>
      <view class="imgae">
        <image src="/images/u23.svg"></image>
      </view>
      <view class="homeSitUp">
        <view class="qianqu">
          <text>坐立体前屈</text>
          <text class="situp">指导老师：谢宏</text>
        </view>
        <view class="tupian">
          <image src="/images/zhenbang.svg"></image>
          <text>32</text>
          <image src="/images/ship.svg"></image>
          <text>32</text>
        </view>
      </view>
    </navigator>
 
  </view>
  <navigator url="/pages/home/dynamics/dynamics" class="Action genduo">
    <text>体育动态</text>
    <text>跟多></text>
  </navigator>
 
  <navigator url="/pages/home/Details/Details" class="Readthe">
    <view>
      <view>和孩子一起锻炼</view>
      <view class="yuduliang">阅读量：32</view>
    </view>
    <image src="/images/u36.png"></image>
  </navigator>
 
  <navigator url="/pages/home/Details/Details" class="Readthe">
    <view>
      <view>和孩子一起锻炼</view>
      <view class="yuduliang">阅读量：32</view>
    </view>
    <image src="/images/u54.png"></image>
  </navigator>
</view>

 

5，详情

6,运行环境

    微信开发者工具

配置文件，app.json.