小程序：小程序中的吸顶效果（小程序操作DOM）、登录授权

小程序中的吸顶效果（小程序操作DOM）

小程序中的吸顶效果

1. wxml

<!-- 吸顶view -->
<view hidden="{{showTabControl}}" class="top">
  	<van-tabs active="a">
     	<van-tab title="标签 1" name="a"></van-tab>
      	<van-tab title="标签 2" name="b"></van-tab>
      	<van-tab title="标签 3" name="c"></van-tab>
   	</van-tabs>
</view>
<!-- 滚动容器 -->
<scroll-view 
    scroll-y 
    lower-threshold="100" 
    id="scroller"
    bindscrolltolower="scrollToLower" 
    bindscroll="scrollPosition"
    scroll-with-animation="true"
    scroll-top="{{topPosition}}"
    style="height:100vh">
    <view style='height:200px;border:1px solid black;background:red'></view>
    
    <!-- 吸顶位置 -->
    <van-tabs active="a" class='xiding'>
    	<van-tab title="标签 1" name="a"></van-tab>
     	<van-tab title="标签 2" name="b">内容 2</van-tab>
     	<van-tab title="标签 3" name="c">内容 3</van-tab>
   	</van-tabs>
    
    <view wx:for="{{listData}}" wx:key="{{index}}" style="height: 100px;border-bottom: 1px solid #f4f4f4;">
      	<van-card
      		num="2"
    		price="{{item.price}}"
      		title="{{item.title}}"
      		thumb="{{ item.show.img }}"
     		bindtap='go'
      		data-id='{{item.iid}}'
       	/>
    </view>
    <view style="text-align: center;margin: 10px;">
     	<view wx:if="{{loading}}">加载中...</view>
        <view wx:if="{{noMore}}">没有更多了</view>
       	<view wx:if="{{loadingFailed}}">数据加载失败,请重试</view>
    </view>
     
</scroll-view>

2. wxss

 .top{
 		display: fixed;
      	left: 0;
      	top:0;
 }

3. js

    Page({
    	data: {
       		showTabControl: true //默认隐藏吸顶
      	},
    	scrollPosition(e) {
     		wx.createSelectorQuery().select('.xiding').boundingClientRect((rect) => {
          		// console.log(rect)
                const show = rect.top > 0
          		this.setData({
            		showTabControl: show
          		})
        	}).exec()
      	},
    })

小程序操作DOM

    <scroll-view scroll-y='true' style="height:100vh;" bindscroll="bindscroll" scroll-into-view="{{toview}}">
    	<view class="rol">
    		<text class="title" id="normalServe">常用应用</text>
    		<text class="title" id="normalServe1">常用应用2</text>
    		<text class="title" id="normalServe2">常用应用3</text>
    	</view>
    </scroll-view>
    <view class="dadasfa"  wx:if="{{showNav}}"> dsadasfaf</view>

   Page({
     	//声明节点查询的方法
     	queryMultipleNodes: function() {
       		const query = wx.createSelectorQuery()                // 创建节点查询器 query
       		query.select('#productServe').boundingClientRect()    // 这段代码的意思是选择Id=productServe的节点，获取节点位置信息的查询请求
       		query.select('#enterpriseServe').boundingClientRect() // 这段代码的意思是选择Id=enterpriseServe的节点，获取节点位置信息的查询请求
       		query.select('#normalServe').boundingClientRect()     // 这段代码的意思是选择Id=normalServe的节点，获取节点位置信息的查询请求
       		query.selectViewport().scrollOffset()                 // 这段代码的意思是获取页面滑动位置的查询请求
       		query.exec((res) => {
         		res[0].top                                          // #productServe节点的到页面顶部的距离
         		res[1].width                                        // #enterpriseServe节点的宽度
         		res[2].height                                       // #normalServe节点的高度
      		 })
    	}
   })
   console.log(res) 输出节点信息详情

微信小程序登录授权

讲解视频观看https://live.csdn.net/v/131706

微信小程序登录授权

我们在项目中，登录，授权页面，都必须要传递token值。
一般商品详情页面的商品收藏，加入购物车。购物车页面都需要传递token。

token是什么？

token是前端鉴权的一种方式，token由后端生成， 是有时效性的。

微信小程序如何登录授权，拿到token

第一步：登录流程
前端—>后端—>腾讯服务器
wx.login—>wx.request—>后端—>小程序(腾讯)服务器
小程序wx.login官方文档https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

第二步：
登录---->检测是否注册—>没有注册先获取用户信息进行注册（写入公司数据库）—>进行登录
将登录弹框封装成一个模板，进行引用

首先要在根目录下创建一个env文件，里面创建一个index.js，配置不同的开发环境。

//配置不同的开发环境
module.exports={
  	//开发环境
  	Dev:{
    	baseUrl:'https://api.it120.cc/liyaqiong', //开发环境的接口
  	},
  	//测试环境
  	Test:{
    	baseUrl:'http://www.test.com'
  	},
  	//生产环境
  	Prod:{
    	baseUrl:'http://www.api.douban.com'
  	}
}

要封装好请求接口文件（创建一个http文件，里面设置api.js、fetch.js、http.js）

api.js

    module.exports={
      	"registor":"/user/wxapp/register/complex",//注册
      	"login":"/user/wxapp/login",//登陆
      	"userDetail":"/user/detail"//用户详细信息
    }

fetch.js

    module.exports=(url,method,data)=>{
      	let p=new Promise((resolve,reject)=>{
        	wx.request({
          		url: url,
          		method:method,
          		header:{'Content-Type': 'application/x-www-form-urlencoded'},
          		data:Object.assign({},data),
          		success(res){
           			resolve(res)
          		},
          		fail(err){
            		reject(err)
          		}
        	})
    	})	
      	return p;
    }

http.js

    const api = require('./api')
    const fetch = require('./fetch')
    const baseUrl="https://api.it120.cc/tianxing";//基础域名
    //注册
    function registor(data={}){
       	return fetch(baseUrl+api.registor,'post',data)
    }
    
    //登陆
    function login(data){
      	return fetch(baseUrl+api.login,'post',data)
    }
    //用户详细信息
    function userDetail(data){
      	return fetch(baseUrl+api.userDetail,'get',data)
    }
    module.exports={
       	registor,
       	login,
       	userDetail
    }

具体实现步骤

1.点击封装的登录模板中的“允许”按钮，执行processLogin方法

 	<view wx:else class="header-box">
  		<image class="avatar" src="/images/nologin2.png"></image>
   		<van-button plain custom-class="btn" size="small" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="processLogin">立即登录</van-button>
 	</view>
	<!-- getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 -->

processLogin方法：

	//立即登录
  	processLogin(e) {
     	console.log(e);
        if (!e.detail.userInfo) {
          	wx.showToast({
            	title: '已取消',
            	icon: 'none',
          	})
          	return;
        }
        // 如果有userinfo ,就调用register注册方法
        this.registor();
  	},

2.如果有userInfo，就调用register注册方法，通过注册把腾讯信息写入公司数据库
注册需要三个参数

1. iv 加密值
2. code
3. encryptedData 加密数据

 	//注册
  	registor(){
     	let _this = this;
        //调用接口获取登录凭证（code）唯一标识（openid）及本次登录的会话密钥（session_key）
        wx.login({
          	success: function (res) {
            	let code = res.code; // 微信登录接口返回的 code 参数，下面注册接口需要用到
            	wx.getUserInfo({  //获取用户信息
              		success: function (res) {
                		let iv = res.iv; //加密算法的初始向量
                		let encryptedData = res.encryptedData; //完整用户信息的加密数据
                		// 下面开始调用注册接口
                  		http.registor({  //微信小程序用户快速注册
                    		code: code,
                    		encryptedData: encryptedData,
                    		iv: iv
                  		}).then(function (res) {
                    		console.log(res);
                    		_this.login();
                  		}) 
              		}
            	})
          	}
        })
  	},

3.执行登录的login方法，通过登录拿到token

  	//登陆
  	login(page){
      	const _this = this
        wx.login({ // 获取登陆凭证 code
          	success: function (res) {
               	console.log(res)
              	//调用登陆接口，传code
              	http.login({code:res.code,type:2}).then(function (res) {        
                	console.log(res)
                	res=res.data;
                	if (res.code != 0) {
                  		// 登录错误
                  		wx.showModal({
                    		title: '无法登录',
                    		content: res.msg,
                    		showCancel: false
                  		})
                  		return;
               		}
                	console.log(res)
                	wx.setStorageSync('token', res.data.token)
                	wx.setStorageSync('uid', res.data.uid)
                
                	_this.onShow()
                
              	})
          	}
      	})
 	},

4.登陆成功触发onShow()

    onShow: function () {
       	this.getUserApiInfo();
    },

5.获取用户详细信息

	//获取用户详情信息
   	getUserApiInfo() {
      	console.log(10000)
        var that = this;
        //后去用户详细信息
        http.userDetail({token:wx.getStorageSync('token')}).then(function (res) {
          	console.log(res);
          	if (res.data.code == 0) {
            	// let _data = {}
            	// _data.apiUserInfoMap = res.data 
            	// that.setData(_data);
    
            	that.setData({
              		apiUserInfoMap:res.data.data 
            	})
          	}
        })
  	},

6.退出登陆

    点击退出按钮
    <van-cell wx:if="{{apiUserInfoMap}}" title="退出登录" is-link bindtap="loginOut" />
    //退出函数
  	loginOut(){
       	wx.removeStorageSync('token')
        wx.removeStorageSync('uid')
        wx.reLaunch({
          	url: '/pages/mylogin/mylogin'
        })
   	},

7.检测登录状态和token是否过期

	//检测token是否过期
    //只检测登录态（检测微信返回）
    async function checkSession(){
      	return new Promise((resolve, reject) => {
          	//通过内置方法检测
        	wx.checkSession({
          		success() {
	           		return resolve(true)
          		},
          		fail() {
            		return resolve(false)
          		}
      		})	
      	})
    }
    // 总体检测登录状态，包括token和微信登录态 返回 true 或false
    
    //在app.js的onload生命周期通过index.checkHasLogined调用,如果过期
    
    async function checkHasLogined() {
      	//获取本地存储的token
      	const token = wx.getStorageSync('token')
      	//如果没有token，直接返回false
      	if (!token) {
        	return false
      	}
    
      	//检测微信登录态
      	/**
       	* 调用成功说明当前 session_key 未过期，调用失败说明 session_key 已过期
       	*/
      	const loggined = await checkSession()
    
      	//如果没有登录态，则移除token,并返回false
      	if (!loggined) {
        	wx.removeStorageSync('token')
        	return false
      	}
    
      	//检测登录token是否有效
      	const checkTokenRes = await WXAPI.checkToken(token)
    
      	//如果登录token无效，移除token并返回false
      	if (checkTokenRes.code != 0) {
        	wx.removeStorageSync('token')
        	return false
      	}
      
      	//如果有token并且有效，并且微信登录态也有效则返回true
      		return true
	    }
    
    	module.exports = {
      		login: login,
      		register: register,
      		checkSession:checkSession,
      		checkHasLogined:checkHasLogined
    	}

讲解视频观看https://live.csdn.net/v/131706