微信小程序(day04)

好谷商城小程序

1.页面的目录结构

2.让顶部导航栏隐藏
app.json/home.json

{"navigationStyle": "custom"}

3.components–header组件
header.wxml

<view class="header_wrap" style="height: {{navH}}rpx;"><view class="header"><view class="search" bindtap="toSearchFn">蓝色海洋</view><view class="title" style="height: {{navH}}rpx;line-height: {{navH}}rpx;">好谷商城</view></view>
</view>

header.js

// components/header/header.js
let app = getApp(); //获取整个小程序实例
console.log(app);Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {// 定义当前的header的高度navH: 0},/*** 组件的方法列表*/methods: {// 跳转到search页面toSearchFn() {wx.navigateTo({url: '../../pages/search/search'})}},// 生命周期lifetimes: {// 在组件实例进入页面节点树时执行attached() {this.setData({navH: app.globalData.headerHeight})}}
})

home页面的开发

home.wxml

<view style="height:{{navH}}rpx;"></view>
<!-- 头部 -->
<header></header>
<!-- tab栏 -->
<scroll-view class="tabs" scroll-x="{{true}}"><view class="tabs_wrap"><view class="tabs_item {{activeIndex==index?'active':''}}" wx:for="{{tabsLists}}" wx:key="id" bindtap="changeTabs" data-index="{{index}}">{{item.title}}</view></view>
</scroll-view>
<view class="bg"></view>
<!-- swiper -->
<swiper class="swiper" autoplay="{{true}}" interval="2000" indicator-dots="{{true}}" indicator-active-color="pink" circular><swiper-item><image src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978396430.jpg" alt="" /></swiper-item><swiper-item><image src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395260.jpg" alt="" /></swiper-item><swiper-item><image src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395241.jpg" alt="" /></swiper-item>
</swiper><!-- navTabs -->
<view class="navTabs"><view class="navTabs_item" wx:for="{{navTabsDatas}}" wx:key="id" bindtap="changeNavTabs" data-navTabsIndex="{{index}}"><view class="tabs_tit">{{item.title}}</view><view class="tabs_tip {{navTabsActive==index?'active':''}}">{{item.tips}}</view></view>
</view><!-- 首页列表 -->
<view class="list_wrap"><view class="list_item" wx:for="{{HomeListDatas}}" wx:key="goods_id" bindtap="toDetailPage" data-id="{{item.goods_id}}"><view class="list_img"><image src="{{item.goods_thumb}}"></image></view><view class="list_tit">{{item.title}}</view></view>
</view>

home.js

// pages/home/home.js
let app = getApp(); //获取整个小程序实例import { getHomeListApi } from "../../api/homeapi"Page({/*** 页面的初始数据*/data: {// 导航栏的数据tabsLists: [{id: 1,title: "首页"}, {id: 2,title: "家用电器"}, {id: 3,title: "男装女装"}, {id: 4,title: "鞋靴箱包"}, {id: 5,title: "手机数码"}, {id: 6,title: "电脑办公"}, {id: 7,title: "家居家纺"}, {id: 8,title: "个人化妆"}, {id: 9,title: "休闲运动"}],// tab激活时的索引activeIndex: 0,navH: 0,// Tab栏的数据navTabsDatas: [{id: 1,title: "精选",tips: "为你推荐",type: "is_best"}, {id: 2,title: "社区",tips: "新奇好物",type: ""}, {id: 3,title: "新品",tips: "潮流上新",type: "is_new"}, {id: 4,title: "热卖",tips: "火热爆款",type: "is_hot"}],navTabsActive: 0,// 首页列表的数据HomeListDatas: [],page: 1,size: 10,type: "is_best"},// 修改导航栏的indexchangeTabs(e) {console.log(e.target.dataset.index);this.setData({activeIndex: e.target.dataset.index})},//  修改Tab的indexchangeNavTabs(e) {console.log(e);let index = e.currentTarget.dataset.navtabsindex;this.setData({navTabsActive: index}, () => {let type = this.data.navTabsDatas[index].type;this.setData({type: type,page: 1})// 先清空首页列表的数据,再进行请求this.data.HomeListDatas = [];this.getHomeListApi();})},// 请求首页列表的接口async getHomeListApi() {// // API--网络--发起请求// wx.request({//   url: '/goods/type_list',//   data: {//     page: 1,//     size: 10,//     type: "is_best"//   },//   method: "get",//   success: (result) => {//     // 接口返回的数据// console.log(result.data.data);//   }// })let result = await getHomeListApi({url: "/goods/type_list",data: {page: this.data.page,size: this.data.size,type: this.data.type},method: "get",})// console.log(result.data.data);// API--界面--交互  开启loadingwx.showLoading();if (result.data.status == "success") {this.setData({HomeListDatas: this.data.HomeListDatas.concat(result.data.data)}, () => {wx.hideLoading();})}},// 跳转到detail页面toDetailPage(e) {// 获取到对应商品的id// console.log(e.currentTarget.dataset.id);let id = e.currentTarget.dataset.id;wx.navigateTo({url: '../detail/detail?goods_id=' + id,})},/*** 生命周期函数--监听页面加载*/onLoad(options) {// 设置从app传来的header的适配高度this.setData({navH: app.globalData.headerHeight}),// 请求首页列表的数据this.getHomeListApi();},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {console.log("到底了");// 触底让page++this.setData({page: this.data.page + 1}, () => {this.getHomeListApi();})},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

home.json

{"usingComponents": {"header": "../../components/header/header"},"navigationStyle": "custom"}

header的适配

app.js

// app.js
App({onLaunch() {// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})/* onLaunch:已进入页面就会执行的*/// 获取当前的系统信息wx.getSystemInfo({success: (result) => {// 获取当前设备状态栏console.log(result);// 获取全局数据// console.log(this.globalData.headerHeight);// 求出适配的header高度的公式// header高=当前设备状态栏高*（750/当前设备窗口宽）+88(导航栏的高度)this.globalData.headerHeight = result.statusBarHeight * (750 / result.windowWidth) + 88;// 修改globalData中的winHeightthis.globalData.winHeight = result.windowHeight;},})},globalData: {userInfo: null,headerHeight: 0, //定义header组件的高度数据winHeight: 0,}
})

请求数据

法一:直接请求

        // // API--网络--发起请求wx.request({url: '/goods/type_list',data: {page: 1,size: 10,type: "is_best"},method: "get",success: (result) => {// 接口返回的数据console.log(result.data.data);}})

法二：二次封装
utils–request.js

// 对wx.request()的二次封装
let baseURL = "https://x.dscmall.cn/api"
let request = (url, data = {}, method = "get") => {return new Promise((resolve, reject) => {wx.request({url: baseURL + url,data,method,header: {"content-type": "application/json"},success: (result) => {resolve(result);},fail: (err) => {reject(err);}})})
}// 暴露
export default request

api–homeApi.js

import request from "../utils/request"// 首页列表
export let getHomeListApi = (data) => {return request(data.url, data.data, data.method);
}// 详情页的api
export let getDetailApi = (data) => {return request(data.url, data.data, data.method)
}//使用的时候
// getHomeList({//   url:"",
//   data:{},
//   method:""
// })

详情页的开发

detail.wxml

<view class="view_page"><!-- header --><view class="header_wrap" style="height: {{navH}}rpx;"><view class="header"><view class="back" bindtap="backFn">返回</view></view><view class="tabs"><view class="tabs_item {{activeIndex==index?'active':''}}" wx:for="{{tabs}}" data-index="{{index}}" wx:key="index" bindtap="changeTabs">{{item}}</view></view></view><!-- scroll-into-view//根据id选择器，跳到对应的子元素的位置scroll-with-animation="{{true}}"//添加动画bindscroll//滚动时触发--><scroll-view scroll-y="{{true}}" style="height:{{winHeight}}px; margin-top: {{navH}}rpx;" scroll-into-view="{{goid}}" scroll-with-animation="{{true}}" bindscroll="scrollPageFn"><!-- detail_0--商品 --><view id="detail_0"><!-- 轮播图 --><swiper class="swiper" indicator-dots="{{true}}" indicator-active-color="#f55"><swiper-item class="swiper_item" wx:for="{{detailDatas.gallery_list}}" wx:key="img_id"><image src="{{item.img_url}}"></image></swiper-item></swiper><view class="goods_price">{{detailDatas.shop_price}}</view><view class="goods_tit">{{detailDatas.goods_name}}</view></view><!-- detail_1 评论 --><view id="detail_1">评论</view><!-- detail_2 详情 --><view id="detail_2">详情</view><!-- detail_3 推荐 --><view id="detail_3">推荐</view></scroll-view><!-- footer--购物车 --><view class="detail_footer"><view class="server">客服</view><button class="dialog" open-type="contact" send-message-title="{{detailDatas.goods_name}}" send-message-img="{{detailDatas.goods_thumb}}" show-message-card="{{true}}"></button><view class="cart" bindtap="toCartPage">购物车</view><view class="num" wx:if="{{buyNum>0}}">{{buyNum}}</view><view class="addCart" bindtap="addCart">加入购物车</view><view class="purchase">领券购买</view></view>
</view><!--
button的开放功能
open-type="contact" //打开客服会话
send-message-title="{{detailDatas.goods_name}}"//会话内消息卡片标题，
send-message-img="{{detailDatas.goods_thumb}}"//会话内消息卡片图片
show-message-card="{{true}}"//用户是否可以发送卡片-->

detail.js

import { getDetailApi } from "../../api/homeapi"
let app = getApp();Page({/*** 页面的初始数据*/data: {// 详情页的数据detailDatas: {},navH: 0,winHeight: 0,tabs: ["商品", "评论", "详情", "推荐"],activeIndex: 0,// scroll-view组件跳转子元素的idgoid: "",// 每个detail_*的height和toptopArr: [],heightArr: [],// 购物车购买数量buyNum: 0},// 获取详情页async getDetailDatas(options) {let result = await getDetailApi({url: "/goods/show",data: {goods_id: options.goods_id},method: "post"});// console.log(result.data.data);this.setData({detailDatas: result.data.data})},// 返回backFn() {wx.navigateBack({delta: 1,})},changeTabs(e) {let index = e.currentTarget.dataset.index;// 点击后获得对应的id选择器let id = "detail_" + indexthis.setData({activeIndex: index,goid: id})// console.log(this.data.goid);},// 初始化获取DOM操作initDom() {let topArr = []; //存放距离顶部的位置let heightArr = []; //存放DOM元素的高度for (let i = 0; i < 4; i++) {//获取DOMlet detailId = "#detail_" + i;const query = wx.createSelectorQuery();query.select(detailId).boundingClientRect();query.exec((res) => {//res有该DOM的Top// console.log(res[0]);topArr.push(res[0].top);heightArr.push(res[0].height);this.setData({topArr: topArr,heightArr: heightArr})})}},// 页面滚动的方法scrollPageFn(e) {// 获取到scrollTop// console.log(e.detail);// console.log(this.data.topArr);// console.log(this.data.heightArr);let scrollTop = e.detail.scrollTop;for (let i = 0; i < this.data.topArr.length; i++) {// 判断区间if (scrollTop < this.data.topArr[i] + this.data.heightArr[i] - this.data.navH / 2) {this.setData({activeIndex: i})break;}}},// 加入购物车addCart() {this.setData({buyNum: this.data.buyNum + 1})// 定义购物车的数据(根据id获取到的详情页数据detailDatas赋给购物车)let cartData = {shop_id: this.data.detailDatas.ru_id,shop_name: this.data.detailDatas.rz_shop_name,shop_is_select: true,children: [{goods_id: this.data.detailDatas.goods_id,shop_id: this.data.detailDatas.ru_id,goods_name: this.data.detailDatas.goods_name,goods_price: this.data.detailDatas.shop_price,goods_is_select: true,buy_num: this.data.buyNum,goods_thumb: this.data.detailDatas.goods_thumb}]}// 将cartData购物车的数据存到本地存储，方便在购物车页面获取let cartListDatas = wx.getStorageSync('cart') || []; //加入本地存储先读取是否有别的数据,有的话读取出来再加入,防止每次添加数据都是从空数组开始// 1、 购物车列表如果为空，可以直接添加// 2、购物车列表不为空// 2.1判断当前要添加的产品是否在购物车列表中存在// if存在让对应店铺中的数据数量++// else 在对应商铺中的children中添加// 1.判断商铺是否存在let isShop = cartListDatas.find(item => {return item.shop_id == cartData.shop_id;})//2.判断商品是否存在let isGoods = cartListDatas.find(item => {return item.children.find(value => {return value.goods_id == cartData.children[0].goods_id;})})console.log(isShop);console.log(isGoods);// 如果商铺和商品存在,让购买的数量++if (isShop) {if (isGoods) {// 条件成立说明该商品在购物车中存在for (let i = 0; i < isGoods.children.length; i++) {if (cartData.children[0].goods_id == isGoods.children[i].goods_id) {isGoods.children[i].buy_num += 1;}}} else {isShop.children.push(cartData.children[0]);}} else {cartListDatas.push(cartData);}wx.setStorageSync('cart', cartListDatas);},// 跳转至购物车页面toCartPage() {wx.switchTab({url: '../cart/cart'})},/*** 生命周期函数--监听页面加载*/onLoad(options) {// 获取到路由传递过来的id// console.log(options.goods_id);this.getDetailDatas(options);// 获取navHthis.setData({navH: app.globalData.headerHeight,winHeight: app.globalData.winHeight})// console.log(this.data.winHeight);//页面进入获取TabsDOM元素this.initDom();},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

购物车页面的开发

cart.wxml

<view class="cartPage"><view class="cart_header">地址</view><!-- 店铺 --><view class="cart_list"><view class="shop_card" wx:for="{{cartListDatas}}" wx:key="shop_id" wx:for-item="cartListData"><!-- 店铺名 --><view class="shop_name"><view class="shop_select" bindtap="shopSelectFn" data-cartList="{{cartListData}}" data-index="{{index}}"><icon type="success" wx:if="{{cartListData.shop_is_select}}"></icon><icon type="circle" wx:else></icon></view><view class="shop_tit">{{cartListData.shop_name}}</view></view><!-- 商品名 --><view class="goods_item" wx:for="{{cartListData.children}}" wx:key="goods_id"><view class="shop_select"><icon type="success" wx:if="{{item.goods_is_select}}"></icon><icon type="circle" wx:else></icon></view><view class="goods_info"><view class="goods_thumb"><image src="{{item.goods_thumb}}"></image></view><view class="goods_right"><view class="goods_desc">{{item.goods_name}}</view><view class="goods_act"><view class="goods_price">{{item.goods_price}}</view><view class="addgoods"><button>-</button><input type="text" value="{{item.buy_num}}" /><button>+</button></view></view></view></view></view></view></view><!-- 结算 --><view class="cart_footer"><view class="selectAll"><icon type="success" wx:if="{{isSelectAll}}"></icon><icon type="circle" wx:else></icon>全选</view><view class="total">合计：￥50</view><view class="buy_now">去结算（3）</view></view><view style="height: 100rpx;"></view>
</view>

cart.js

Page({/*** 页面的初始数据*/data: {// 购物车的数据cartListDatas: [],// 全选isSelectAll: true,winH: 0},// 判断是否全选selectAllFn() {let cartListDatas = wx.getStorageSync('cart');let isSelectAll = cartListDatas.every(item => {return item.shop_is_select == true});this.setData({isSelectAll: isSelectAll})},// 点击商铺让自己下的内容选中shopSelectFn(e) {console.log(e);// 点击的当前店铺的数据let cartList = e.currentTarget.dataset.cartlist;// 点击店铺的索引let index = e.currentTarget.dataset.index;console.log(cartList);cartList.shop_is_select = !cartList.shop_is_select;// 更新本地存储let cartListDatas = wx.getStorageSync('cart');cartListDatas[index] = cartList;wx.setStorageSync('cart', cartListDatas);this.setData({cartListDatas: cartListDatas}, () => {this.selectAllFn();})},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {// 读取本地存储中存储的购物车的数据let cartData = wx.getStorageSync('cart');this.setData({cartListDatas: cartData})this.selectAllFn();},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

我的登录页面的开发

图解

mine.wxml

<!--
open-type="getPhoneNumber"//获取用户手机号bindgetphonenumber="getPhoneNumberFn"// 可以从回调中获取到用户信息的事件-->
<button bindtap="loginFn">点击获取头像昵称</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumberFn" type="primary" wx:if="{{isLogin}}">一键登录</button>
<image src="{{userInfo.avatarUrl}}"></image>
<view>昵称:{{userInfo.nickName}}</view>
<view>手机号:{{phone}}</view>

mine.js

// pages/mine/mine.js
Page({/*** 页面的初始数据*/data: {// 用户的信息userInfo: {},phone: "",isLogin: true,},// 获取用户头像和昵称loginFn() {// API--开放接口--用户信息wx.getUserProfile({desc: '玩的啊',success: (result) => {// 获取到返回的用户的信息// console.log(result);this.setData({userInfo: result.userInfo})}})},// 获取用户手机号getPhoneNumberFn(e) {console.log(e.detail); //获取加密之后的数据// 登录流程:/* 1.前端用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。2.后端调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 会话密钥 session_key发送给前端openid和sessionkey3.前端把openid和sessionkey、iv、encryteData发送给后端,让其进行解密。4.后端把解密的信息发送给前端(利用API中的解密教程,可以下载)5.前端把phone和openid发送给后端,让其存储在database中，将openid存储在本地,再次进来时,onshow()中获取openid，再利用该openid发给后台,获取用户数据,最后渲染到页面。// 192.168.0.101--dali// 192.168.1.63--haogu//192.168.0.108 家*/wx.login({timeout: 5000,success: (result) => {console.log(result.code);// 将code发送给后端wx.request({url: 'http://192.168.0.108:3000/getsessionkey',data: {code: result.code,},success: (result2) => {console.log(result2); //接收到openid--用户的唯一标识和sessionkey--秘钥wx.request({url: 'http://192.168.0.108:3000/getPhoneNumber',method: "GET",data: {openid: result2.data.openid,sessionKey: result2.data.session_key,encryptedData: e.detail.encryptedData,iv: e.detail.iv},success: (result3) => {// 接收后台解密后的数据console.log(result3.data);this.setData({phone: result3.data.phoneNumber})wx.request({url: 'http://192.168.0.108:3000/adduser',method: "POST",data: {openid: result2.data.openid,phone: result3.data.phoneNumber},success: (res) => {console.log(res);// 将openid存储在本地wx.setStorageSync('openid', result2.data.openid);// 跳转至首页wx.switchTab({url: '../home/home',})}})}})}})}})},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {let openid = wx.getStorageSync('openid');if (openid) {this.setData({isLogin: false})// 根据本地的openid向后端发起请求数据库对应的用户信息wx.request({url: 'http://192.168.0.108:3000/getuserinfo',data: {openid: openid},success: (result) => {//获取到用户的信息console.log(result.data.data[0]);this.setData({phone: result.data.data[0].phone})}})}},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

好谷商城的后台

目录结构

app.js

let express=require("express");
let axios=require("axios");
let app=new express();
let mysql = require('mysql');
var randomstring = require("randomstring");//引入随机字符模块
var connection = mysql.createConnection({host: 'localhost',user: 'root',password: '123456',database: 'student'
});app.use(express.urlencoded({extended:false}));
app.use(express.json());// http://localhost:3000/getsessionkey?code="nfjdfj"
app.get("/getsessionkey",(req,res)=>{let {code}=req.query;//获取到前端发送过来的codelet appId="wxd2511dd893c162f5";let secret="f03ca1a4d48fcefcb55f50c09873978b";// console.log(code);// 向腾讯发送请求获取openid和sessionkeyaxios.get(`https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${secret}&js_code=${code}&grant_type=authorization_code`).then((result)=>{// console.log(result);//接收openid和sessionkeyres.send(result.data);});
})// http://localhost:3000/getPhoneNumber
// 前端需要发送appid sessionKey encryptedData iv
app.get("/getPhoneNumber",(req,res)=>{let{openid,sessionKey,encryptedData,iv}=req.query;// 后台进行解密let appId="wxd2511dd893c162f5";var WXBizDataCrypt = require('./WXBizDataCrypt');var pc = new WXBizDataCrypt(appId, sessionKey)var data = pc.decryptData(encryptedData , iv)// console.log(data);res.send(data);
});//添加用户的接口
// http://localhost:3000/adduser
app.post("/adduser",(req,res)=>{let {phone,openid}=req.body;let username="hg_"+randomstring.generate(7);let sql=`INSERT INTO hg_weixin SET username="${username}",phone="${phone}",openid="${openid}"`;connection.query(sql,(err,data)=>{if(err){res.json({msg:"登陆失败",err:err})}else{res.json({status:200,msg:"登陆成功",data:data})}});
});//获取用户信息
//http://localhost:3000/getuserinfo
app.get("/getuserinfo",(req,res)=>{let {openid}=req.query;let sql=`select * from hg_weixin where openid="${openid}"`;connection.query(sql,(err,data)=>{if(err){res.json({msg:"获取失败,请去登录",err:err})}else{res.json({status:200,msg:"获取成功",data:data})}});
});app.listen(3000,()=>{console.log("3000running");
})

项目连接

点击下载该小程序项目

笔记

微信小程序(day04)相关推荐

Python3 - 三天学会微信小程序（Python后端研习）
文章目录一.day01微信小程序 1. 问题 2. 环境的搭建 2.1 Python环境 2.2 小程序环境 2.2.1 申请一个微信公众平台 2.2.2 保存自己的appid 2.2.3 下载开发 ...
微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现下面看一个简单的demo 传递数据要传递界面 wxml  <view class= ...
微信小程序web-view使用
web-view 可以是微信小程序支持嵌套网页例如想嵌套百度可以这样 <view ><web-view src="https://www.baidu.com/s?ie= ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
微信小程序bindtap 与 catchtap 是使用
如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您, 个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡下面会有一个demo给出解释, ...
微信小程序根据后台返回值设置自己想要的结果
今天做微信小程序充值列表其中微信或者支付后台返回的是1和2 , 那么就需要判断返回值是否为1或者是2然后在改变简单的就是在xml中判断下就行了 <view class='recharge_t ...
微信小程序import和include
import 和include 是微信小程序提供的2中引用方式 import 一般结合模板template使用 import import可以在该文件中使用目标文件定义的template,如: 在 i ...
微信小程序扫描二维码
最近官方地址看到这句话我想到了,微信小程序是调用微信的扫一扫那么扫一扫的界面就可以不用再写了, 想到android这边都是用图片或者手动画,突然感觉心情特别的好, 里面的参数自己看吧,看到最下面的 ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...