2018-08-29 16:30:16 stp_zsj 阅读数 2119
  • 微信小程序系统教程Java版[3/3阶段]_微信小程序支付

    微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序的基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信小程序开发宝典》。 购课请咨询qq2326321088

    4263 人正在学习 去看看 翟东平

比较简单代码就不多贴。

template:

<template name="tabbar">
  <view class="weui-tabbar">
    <block wx:for="{{list}}" wx:key="index" wx:for-item="item">
      <navigator url="{{item.url}}" hover-class='none' class="weui-tabbar__item weui-bar__item_on">
        <image src='/image/home.png' class="weui-tabbar__icon"></image>
        <view class="weui-tabbar__label">{{item.name}}</view>
      </navigator>
    </block>
  </view>
</template>

这里样式采用weui的底部导航样式:


.weui-tabbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: absolute;
  z-index: 500;
  bottom: 0;
  width: 100%;
  background-color: #f7f7fa;
}

.weui-tabbar:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #c0bfc4;
  color: #c0bfc4;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.weui-tabbar__item {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  padding: 5px 0 0;
  font-size: 0;
  color: #999;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
  color: #09bb07;
}

.weui-tabbar__icon {
  display: inline-block;
  width: 27px;
  height: 27px;
}

.weui-tabbar__label {
  text-align: center;
  color: #999;
  font-size: 10px;
  line-height: 1.8;
}

使用方法:在需要使用页面引入模板

<import src="/template/tabbar.wxml" />

<template is="tabbar" data="{{item}}"></template>

代码不全,不懂得可以留言

2019-06-12 23:48:55 weixin_44100127 阅读数 43
  • 微信小程序系统教程Java版[3/3阶段]_微信小程序支付

    微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序的基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信小程序开发宝典》。 购课请咨询qq2326321088

    4263 人正在学习 去看看 翟东平

微信小程序总结*

一、开发文档

写小程序的第一步也是最重要的一步,要先理清思路、小程序开发逻辑---写开发文档
文档的主要组成:
1.数据结构
	1.1小程序的组成结构
2.业务说明
	小程序的思路逻辑(最重要的部分)
3.界面的要求

二、中间遇到的问题

1.页面的搭建(表格的样式)
要求页面头部固定在顶部,页面尾部定位到底部,中间表格部分可以滑动,刚开始写的时候一直用 position:fixed ;固定首尾导致页面直接崩塌。
解决方法:页面布局用 display:flex;(弹性布局)页面分为三个部分(头部,表格展示,尾部)创建三个 设置百分比高度,列表部分用overflow:auto;实现滑动显示。
2. 用户授权之后将数据存入云数据库和本地缓存`
云存储:

 const db = wx.cloud.database()
    db.collection("user").get({
      success: res => {
        this.setData({
          user: res.data,
          gender: res.data[0].gender,
          language: res.data[0].language,
          province: res.data[0].province,
          avatarUrl: res.data[0].avatarUrl,
          country: res.data[0].country,
          _openid: res.data[0]._openid,
        })
      }, fail: err => {
        wx.showToast({
          icon: "none",
          title: '查询记录失败',
        })
      }

本地缓存:
开始时data的值写错了

// 展示本地存储能力
        wx.setStorage({
          key: 'userInfo',
          data: options,
          success: function () {
            console.log('写入value1成功')
          },
          fail: function () {
            console.log('写入value1发生错误')
          }
        })

3. 点击事件 高亮
给一个点击事件绑定方法
获取他的index判断点击的位置

goIndex: function (e) {

    let index = e.currentTarget.dataset.index;
    // console.log('每个index',index)
    this.setData({
      idx: index
    })
  },

style='background:{{index==idx?"#14a1fd":"#fff"}}'
开始时三元运算里给的是参数导致获取不到,修改后直接添加颜色样式成功。

4.授权登录后在用户信息页面没有显示第一条数据的详细信息
失败原因没有给把第一条要显示的信息的值取到
用data[0]取第一条要显示的数据的值

const db = wx.cloud.database()
    db.collection("user").get({
      success: res => {
        this.setData({
          user: res.data,
          gender: res.data[0].gender,
          language: res.data[0].language,
          province: res.data[0].province,
          avatarUrl: res.data[0].avatarUrl,
          country: res.data[0].country,
          _openid: res.data[0]._openid,
        })
      }, fail: err => {
        wx.showToast({
          icon: "none",
          title: '查询记录失败',
        })
      }
    })

5. openid没有获取到
要获取openid要同后端合作 把从wx.login() 获得的code 去换取 openid

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://test.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

6. 下拉刷新数据
添加下拉刷新的时候没有将数据绑定导致获取数据失败
也就是this.setData 里面的值没有绑定

onPullDownRefresh: function () {
    const db = wx.cloud.database()
    db.collection("user").get({
      success: res => {
        this.setData({
          user: res.data,
          gender: res.data[0].gender,
          language: res.data[0].language,
          province: res.data[0].province,
          avatarUrl: res.data[0].avatarUrl,
          country: res.data[0].country,
          _openid: res.data[0]._openid,
        })

      }, fail: err => {
        wx.showToast({
          icon: "none",
          title: '查询记录失败',
        })
      }
    })
    console.log(this.data.user)
    this.data.userInfo = [];
    // 网络请求,重新请求一遍数据
    // this.periphery();
    // 小程序提供的api,通知页面停止下拉刷新效果
    wx.stopPullDownRefresh;

  },

7. 两个页面进行判断显示和隐藏
页面展示的时候由于两个页面的判断写的都是一个方法导致,要么同时显示要么同时隐藏。
解决:给两个页面设置不同的参数
在判断本地缓存成功里面进行显示和隐藏的判断

//缓存
    try {
      var value = wx.getStorageSync('userInfo')
      console.log(value)
      if (value) {
        this.setData({
          hid1: '1'
        })
        const db = wx.cloud.database()
        db.collection("user").get({
          success: res => {
            this.setData({
              user: res.data,
            })
          }, fail: err => {
            wx.showToast({
              icon: "none",
              title: '查询记录失败',
            })
          }
        })
      }else{
        this.setData({
          hid: '1'
        })
      }
    } catch (e) {
      this.setData({
        hid:  '1'
      })
    }  
   
  },

8.this 和 that 的区别
this: 表示当前对象(所在的页面都可以用,关键字)
wx. 里面不可以用,需要自定义一个变量 let that = this,使用 that 来保存当前的this的状态。
微信小程序中,在wx.request({});方法调用成功或者失败之后,当使用this.setData修改初始化数据data时,如果使用this.data来获取,会 出现获取不到的情况,调试页面也会报undefiend。在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({});方法的回调函数中,对象已经发生改变,this已经不是wx.request({});方法对象了,data属性也不存在了,从而无法实现对data数据的修改。

三、以后的遇到问题怎么做
1.遇到问题首先去看设计文档,是否是严格按照设计文档上的一步步走的,如果不是要先理清思路,每个步骤的逻辑先理清楚。
2.要学会勤学好问,勤能补拙。
3.学会分解问题,找出着重点,从中心出发,由重及轻。
4.用最快的方法解决问题:有现成的模板可以拿来复用修改一下就好。

四、总结
一开始不要急着开始写,首先要写好开发文档,把逻辑流程理清楚,需要些哪些东西,重点是什么,先把重要的搭起来,然后由重及轻的一步步来,遇到问题自己解决不了的就去问身边会的人,再问别人的过程中自己也要思考为什么要这么些依据是什么,思路是什么,解决问题要学会总结问题,为什么会出现这么错误,一步步的改正。

2018-12-26 16:12:06 qqbaby1437 阅读数 350
  • 微信小程序系统教程Java版[3/3阶段]_微信小程序支付

    微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序的基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信小程序开发宝典》。 购课请咨询qq2326321088

    4263 人正在学习 去看看 翟东平

1.0前言.mp4
1.1课程介绍 定个小目标.mp4
1.2开发文档简读,了解全貌.mp4
1.3CMS原型,我们的初期目标.mp4
1.4微信WEB开发者工具安装.mp4
2.1创建项目.mp4
2.2编写关于我们布局界面.mp4
2.3用变量替换界面里的固定文本.mp4
2.4界面美化.mp4
3.1加入文章列表和内容界面.mp4
3.2为程序加入底部菜单导航.mp4
3.3实现文章列表界面.mp4
3.4实现内容详情界面.mp4
3.5列表和内容界面美化.mp4
4.1小程序CMS系统下载安装.mp4
4.2系统整体功能介绍.mp4
4.3创建一个CMS功能插件.mp4
4.4创建CMS数据库模型和文章内容管理.mp4
5.1小程序CMS后端接口开放.mp4
5.2小程序列表界面数据与后端对接.mp4
5.3小程序内容界面数据与后端对接.mp4
6.1列表页面加载更多文章.mp4
6.2界面反馈提示.mp4
6.3加入加载中的友好提示.mp4
6.4返回 上一页.mp4
7.1创建反馈表单界面.mp4
7.2界面美化.mp4
7.3后端系统增加反馈功能.mp4
7.4用户反馈的内容保存到后端数据库.mp4
7.5使用引用功能分离文档.mp4
8.1缓存文章列表数据.mp4
8.2缓存文章内容数据.mp4
8.3缓存数据方案优化.mp4
9.1搭建HTTPS环境.mp4
9.2用户信息集成实现.mp4
9.3表单反馈自带用户名.mp4
9.4验证登录状态.mp4
9.5实现拨打电话.mp4
10.1后端系统打包.mp4
10.2小程序上线审核.mp4
10.3结语.mp4
视频教程源代码V1.0.zip
视频教程源代码V2.0.zip
微信小程序开发教程.pptx
小程序教程.xmind

下载地址:百度网盘

2018-02-08 16:43:08 shu580231 阅读数 501
  • 微信小程序系统教程Java版[3/3阶段]_微信小程序支付

    微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序的基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信小程序开发宝典》。 购课请咨询qq2326321088

    4263 人正在学习 去看看 翟东平

微信小程序摒除了select,因为觉得这个在移动端的操作以及显示不友好,从而产生了picker,picker也就是从底部弹起的滚动选择器,现在支持的有5种,通过mode来区分。具体的参照微信小程序开发文档

https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html。

本文章主要解释一个mode为selector,平常比较常用的一些固定的选择,我们平常就这样子写了,

<picker bindchange="bindCasPickerChangeStatusEmployee" value="{{index}}" range="{{assetsStatusArrayEmployee}}" name="EmployeeStatus">
<text>在职信息:</text><text>{{assetsStatusArrayEmployee[index]}}</text>
</picker>

其中value为index,,也就是下标,range就是我们的范围。

在js中的data也需要定义一下:

data: {
index: 0,
assetsStatusArrayEmployee: ['在职','离职']
},

最后呈现的效果就是:


下面是一个升级的selector, 比如就是我们的部门信息,这个时候需要的是部门id以及展示的部门name。。这个时候就需要用到另一个属性,来决定我们展示的是什么内容了。range-key="{{'name'}}",这个就是当range是一个object array时,通过这个属性来指定object中的key的值作为选择器展示的内容。下面就是这个具体的代码。depNameArr是从后台接口获取的object array。


OK了。



2019-07-30 13:35:48 Yuan_mingyu 阅读数 15
  • 微信小程序系统教程Java版[3/3阶段]_微信小程序支付

    微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 微信小程序系统教程共有“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]——核心技术”、“微信小程序系统教程[阶段]客服消息+微信支付+九宝电商系统”。 “微信小程序系统教程[阶段]全套课程”包含: 1.微信小程序系统教程[阶段]_客服消息 2.微信小程序系统教程[阶段]_微信支付 3.微信小程序系统教程[阶段]_九宝电商系统 学习“微信小程序系统教程[阶段]”要求有微信小程序的基础。建议先学习“微信小程序系统教程[初级阶段]”、“微信小程序系统教程[中级阶段]”,后在报名“微信小程序系统教程[阶段]”。 阶段讲解的客服消息,是针对小程序的。后台程序用接近底层的技术,没有使用三方技术。这样降低同学们学习成本。 微信支付,这部分课程很有难度,要求同学们认真听讲,有不会的技术问题可以请教老师。购买课程后请联系老师,提供单号,给你源程序。 九宝电商系统是一套十分适和学习、项目的课程。既可以系统的学习微信小程序相关知识,还可以修改后上线。 “微信小程序系统教程[中级阶段]——核心技术”重点讲解微信小程序事件、组件、API 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识。 购买课程的同学,可赠送就九宝老师编写的《微信小程序开发宝典》。 购课请咨询qq2326321088

    4263 人正在学习 去看看 翟东平

写在前边

最近写了一个微信小程序,负责前端部分,加起来断断续续写了20天左右。最开始接触微信小程序,是在去年暑假,大概一年前,当时简单知道一点前端的知识,照着网上的教程写了一些小程序的界面,对于wxml、wxss、js、json也不怎么理解。这一年通过学习,跟着做了一些界面和系统,现在对前端的理解比当时要好了不少。这次的小程序前端是自己完成的,写的过程中遇到了一些困难,有的甚至花费了比较长的时间才解决,写这篇的目的就是把自己踩过的坑和难题记录一下,趁现在还记得,之后遇到忘了,就可以找这篇笔记了。

ps:文中涉及到的参考,都将在文末附上链接。

1. 自定义导航栏

由于需要,小程序是通过用户名和密码登录的,不是通过微信授权登录。小程序本身自带tabBar,但是无法动态改变,小程序用户角色不同,需要显示的导航栏不同,这时,就需要自定义导航栏了。开始查资料的时候,有已经写好的底部导航栏,可以动态改变,于是直接复制过来,但是很快发现了问题:底部导航栏的固定使用的是 position:fixed,bottom:0 , 也就是固定在底部。这时的问题是,导航栏会和正文部分内容重叠。于是又去问度娘,有解决方法说,给正文部分加一个padding-bottom就行,不过我自己试了好多遍,修改了好多,还是无法解决重叠的问题,这个问题困扰了我好久,,后来终于查到了一篇博客,解决了问题。

根据登录角色不同,设置底部导航栏

首先,新建一个文件夹,封装底部导航栏
在这里插入图片描述
其中只需完成tabBar.wxml,样式直接放在app.wxss中
在这里插入图片描述
tabBar.wxml

<template name="tabBar">   
  <view class="tab-bar" style="color: {{tabBar.color}};backgroundcolor:white" > 
  <block wx:for="{{tabBar.list}}" wx:key="pagePath">    
    <navigator url="{{item.pagePath}}" open-type="redirect" class="{{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}}">    
      <image src="{{item.selectedIconPath}}" wx:if="{{item.active}}" class="img"></image>    
      <image src="{{item.iconPath}}" wx:if="{{!item.active}}" class="img"></image>  
      <text class='tabbar_text' style='display:block'>{{item.text}}</text> 
    </navigator>    
    </block>  
    <view class="clear"></view>    
  </view>    
</template>

app.wxss

.container {
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
/* 角色1 */
.menu-item{
  width: 25%;  
  float: left;  
  text-align: center; 
  padding: 0;  
  padding-top: 15rpx; 
  background-color: white;
}  
/* 角色2 */
.menu-item1{  
  width: 33.3%;  
  float: left;  
  text-align: center; 
  padding: 0; 
  padding-top: 15rpx;  
  background-color: white;
}  
/* 角色3 */
.menu-item2{
  width: 50%;  
  float: left;  
  text-align: center; 
  padding: 0;  
  padding-top: 15rpx;  
  background-color: white;
}
.img{  
  width: 35rpx;  
  height: 35rpx;  
  display: block;  
  margin:auto;  
}  
.clear{  
  clear: both;  
}  
.tab-bar{ 
  width: 100%;  
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(109, 82, 82, 0.1);
}  
.tabbar_text{
  margin-top: 5rpx;
  margin-bottom: 8rpx;
  font-size: 24rpx
}

调用导航栏,根据角色动态改变
实现原理:
小程序中每个页面都有自己的导航栏,即在每个页面中调用相应角色的导航栏

调用函数定义
直接写在app.js中
在这里插入图片描述
app.js

//角色1 
  editTabBar0: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.globalData.tabBar0;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == _pagePath) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },

  //角色2  
  editTabBar1: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.globalData.tabBar1;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == _pagePath) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },  

  //角色3  
  editTabBar2: function () {
    var _curPageArr = getCurrentPages();
    var _curPage = _curPageArr[_curPageArr.length - 1];
    var _pagePath = _curPage.__route__;
    if (_pagePath.indexOf('/') != 0) {
      _pagePath = '/' + _pagePath;
    }
    var tabBar = this.globalData.tabBar2;
    for (var i = 0; i < tabBar.list.length; i++) {
      tabBar.list[i].active = false;
      if (tabBar.list[i].pagePath == _pagePath) {
        tabBar.list[i].active = true;//根据页面地址设置当前页面状态    
      }
    }
    _curPage.setData({
      tabBar: tabBar
    });
  },  

同时,将导航栏参数,放在全局变量中

app.js

  globalData: {
    userInfo: null,
    tabBar0: {
      "color": "#747474",
      "selectedColor": "#D03A28",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/index/index",
          "text": "医疗服务",
          "iconPath": "../images/bars/medical1.png",
          "selectedIconPath": "../images/bars/medical.png",
          "clas": "menu-item",
          "selectedColor": "#D03A28",
          active: true
        },
        {
          "pagePath": "/pages/daily/daily",
          "text": "日常服务",
          "iconPath": "../images/bars/daily1.png",
          "selectedIconPath": "../images/bars/daily.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item",
          active: false
        },
        {
          "pagePath": "/pages/class/class",
          "text": "活动",
          "iconPath": "../images/bars/class1.png",
          "selectedIconPath": "../images/bars/class.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item",
          active: false
        },
        {
          "pagePath": "/pages/oldcenter/oldcenter",
          "text": "我的",
          "iconPath": "../images/bars/my1.png",
          "selectedIconPath": "../images/bars/my.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item",
          active: false
        }
      ],
      "position": "bottom"
    },

    tabBar1: {
      "color": "#9E9E9E",
      "selectedColor": "#f00",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/daily_volunteer/daily_volunteer",
          "text": "日常服务",
          "iconPath": "../images/bars/daily1.png",
          "selectedIconPath": "../images/bars/daily.png",
          "clas": "menu-item1",
          "selectedColor": "#D03A28",
          active: true
        },
        {
          "pagePath": "/pages/volunteer_service/volunteer_service",
          "text": "活动",
          "iconPath": "../images/bars/class1.png",
          "selectedIconPath": "../images/bars/class.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item1",
          active: false
        },
        {
          "pagePath": "/pages/volunteercenter/volunteercenter",
          "text": "我的",
          "iconPath": "../images/bars/my1.png",
          "selectedIconPath": "../images/bars/my.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item1",
          active: false
        }
      ],
      "position": "bottom"
    },

    tabBar2: {
      "color": "#9E9E9E",
      "selectedColor": "#f00",
      "backgroundColor": "#fff",
      "borderStyle": "#ccc",
      "list": [
        {
          "pagePath": "/pages/admin_activity/admin_activity",
          "text": "活动",
          "iconPath": "../images/bars/class1.png",
          "selectedIconPath": "../images/bars/class.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item2",
          active: true
        },
        {
          "pagePath": "/pages/admincenter/admincenter",
          "text": "我的",
          "iconPath": "../images/bars/my1.png",
          "selectedIconPath": "../images/bars/my.png",
          "selectedColor": "#D03A28",
          "clas": "menu-item2",
          active: false
        }
      ],
      "position": "bottom"
    },
  }

页面中调用举例

example.wxml

<import src="../template/tabBar.wxml"/>
<view>正文</view>
<template is="tabBar" data="{{tabBar:tabBar}}"></template>

example.js

const app = getApp();
Page({
		onLoad: function (options) {
		 app.editTabBar0();//加载底部导航栏,角色1
		}
	})

总结:在登录时判断用户角色,跳转到相应角色的首页,之后按照上述过程,在每个界面调用相应的导航栏即可。

底部导航栏实现

角色1
在这里插入图片描述
角色2
在这里插入图片描述
角色3
在这里插入图片描述

顶部导航

为了方便显示更多内容,有时候需要在界面顶部设置分页的tab,减少页面跳转。
在这里插入图片描述
这个的实现比较简单,通过设置两个顶部栏的点击事件,来控制顶部栏样式的改变和正文部分view的显示隐藏即可。微信小程序与网页不同,js改变样式、属性等,都是通过绑定js中的data来实现。

顶部和底部导航固定

由于正文部分高度不确定,因此页面的基本结构设置成:顶部和底部固定,中间部分滚动

基本框架

wxml

<view class='wraper'>
  <view class='header'>header</view>
  <view class='main'>
    <scroll-view class='main-scroll' scroll-y style="height: 100%">
      <view class='main-list'>
      main
      </view>
    </scroll-view>
  </view>
  <view class='footer'>footer</view>
</view>

wxss

page{
  width: 100%;
  height:100%;
}

.wraper{
  display: flex;
  flex-direction: column;
  width: 100%;
  height:100%;
}

.main{
  flex: 1;
  position: relative;
}

.main-scroll{
  position: absolute;
}

.main-list{
  display: flex;
  flex-wrap: wrap;
}

使用:将已经实现的顶部和底部导航放在框架的header和footer位置。

2.文字样式

垂直居中

在之前写网页的时候,把文字或div放在外层div中,设置成垂直居中(即内层文字或div距离外层大的div上下边沿距离相等),只需要让外层div的height与line-height值相等,但是在小程序中这样设置是有问题的。花费了好久查到,解决办法:给外层div设置高度后,line-height:100%

text高度问题

text标签会自带一个默认的高度,如果想取消高度,给text加属性:display:block

3.时间戳

这个在网上的资料很多,比较容易查到。
注:时间戳包括10位和13位两种,小程序中默认生成的时间戳是13位的。两者的区别是精度不同,13位精确到毫秒,10位精确到秒。实际上,13位时间戳只是比10位的末尾多了000,如果想要转化只要乘除1000即可。

时间戳转日期

在utils.js中定义函数
在这里插入图片描述

//时间戳转日期
function js_date_time(number, format) {
  var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
  var returnArr = [];
  number = number/1000;
  var date = new Date(number * 1000);
  returnArr.push(date.getFullYear());
  returnArr.push(formatNumber(date.getMonth() + 1));
  returnArr.push(formatNumber(date.getDate()));
  returnArr.push(formatNumber(date.getHours()));
  returnArr.push(formatNumber(date.getMinutes()));
  returnArr.push(formatNumber(date.getSeconds()));

  for (var i in returnArr) {
    format = format.replace(formateArr[i], returnArr[i]);
  }
  return format;
}

module.exports = {
  js_date_time: js_date_time //时间戳
}

调用举例:

example.js

var util = require('../../utils/util.js');
var time = util.js_date_time('要转化的时间戳', 'Y/M/D h:m:s');

日期转时间戳

var time = new Date('日期'.getTime()),

注:此处的日期应该为
在这里插入图片描述
如果不是,需要转化成这个格式后再使用

通过生日时间戳计算当前年龄

考虑到用户年龄随时间变化,因此数据库中存的是用户的生日(年、月、日),格式为时间戳。
前端需要根据生日,计算显示出用户现在的年龄。

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

//获取当前时间
var time1 = util.formatTime(new Date());
    time1 = new Date(time1).getTime();
//定义当前时间数组、生日时间数组
var nowArray = util.js_date_time(time1, 'Y/M/D').split('/');
var birthArray = util.js_date_time(this.data.year, 'Y/M/D').split('/');
//计算年龄
var old = nowArray[0] - birthArray[0];
if (nowArray[1] < birthArray[1]) {
   old = old - 1;
 }
else if (nowArray[1] == birthArray[1]) {
  if (nowArray[2] < birthArray[2]) {
    old = old - 1;
  }
}

4.wx.request

小程序中前端访问后台数据库,使用的wx.request方法,与网页中jquery的ajax相似。

基本格式

基本格式与ajax很相似,参数的含义基本是一样的。
区别:header部分是ajax中没有的,但是很简单,参数是固定的。

举例

wx.request({
      url: 'http://localhost:8081/usualService/addVolunteerService',
      data: {
        token: app.globalData.token
      },
      method: 'GET',
      header: {
        'content-type': 'application/json',
      },
      success: function (res) {
        console.log(res);
       }
    })

详细可以参考官方文档
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

this使用

之前在学习写网页的时候,也记得有过this这个东西,但是当时也没太深究它的用法。可是到了小程序中,this变得常用了。尤其是js中遇到给data赋值的时候,要用this.setData( )。

在wx.request中,又是也会遇到需要在请求成功的回调函数中实现对data的赋值,如果这个时候,也像之前一样this.setData( ),就会发现报错了,原因是此处this不再是你想指代的那个this了。
在成功回调函数中使用this,其实此时的this指代的是包含success函数的wx.request方法了,并不是你想指代的那个Page。

所以,要想在此处给Page中的data赋值,要在wx.request调用之前,把this保存下来

test:function()
{
    var that = this;
	wx.request({
      url: '',
      data: { },
      method: 'GET',
      header: {
        'content-type': 'application/json',
      },
      success: function (res) {
          that.setData({});
       }
   )}
}

这样就可以了。

5.参考

https://blog.csdn.net/small_lack/article/details/80959278
https://blog.csdn.net/qq_28483283/article/details/80583197
https://blog.csdn.net/lll_liuhui/article/details/87923041

没有更多推荐了,返回首页