


首页里面分为一下步骤:
1.搜索功能
2.轮播图
我们在呢个微信开发文档里面复制视图容器里面有一个swiper这里面有一个轮播图代码 我们进行复制
请求数据并将后台返回来的数据渲染到页面上即可


3.导航栏区域
我们在want里面找到呢个导航组件找到第一个grid宫格进行复制
然后还是一样的 请求数据 后台返回来 我们进行渲染就可以了 就可以实现出效果
4.楼层效果
(楼层这一块需要渲染两层)
我们先给一个div先把这个名字给渲染出来 然后再通过want里面的找到呢个layout进行布局渲染图片

分类这一块也是分的三大块 ,分别是搜索框和左侧菜单栏渲染以及右侧的内容区域。
我们可以看到刚刚的首页也有搜索框 我们就可以把搜索框拆成一个组件。这样我们就可以少写一个组件。
第一步 我们需要请求接口,将后台返回来的数据渲染到页面上 来完成分类的渲染。右侧数据来渲染我所有数据的children属性。
第二部 右侧的数据,根据效果图 我们可以看到当我们点击左侧区域的时候右侧的数据会跟着我们变化而变化。

渲染的时候 v-for不能重复了 起的名字要不一样 这样会出现报错
当我们点击左侧标签文字的时候 会进行切换 当我们点击那个就会对应到那个图片
我们要绑定一个change属性来进行切换

当我们点击图片的时候跳转到商品列表里面 我们要进行传值 传cid
@click="goList(ite1.cat_id)"

这样就可以跳转商品列表里面了
商品列表页面就是 我们点击分类的时候 传过来的数据 然后我们在接受这个cid
需要在呢个onLoad生命周期函数里面 一个页面只能调用一次 页面加载的时候触发 可以在onLoad
的参数中获取打开当前页面的路径参数
把这些传过来


传过来以后我们在want里面复制呢个卡片 把这些请求的数据给渲染出来就可以了
接口里面:

这样当我们点击分类图片的时候 他的每一个数据都会到商品列表里面了
商品列表里面我们还可以进行价格排序 从小到大 从大到小 他的原理就是说:
我们在页面写两个button按钮都给他们绑定点击事件
就说我这个数组里面所有的数组找到呢个价格 进行sort排序 a-b b-a

当我们点击列表的时候 跳转到商品详情页面 我们需要进行传goods_id
@tap="goDetail(item.goods_id)"
点击图片给他绑定事件
使用navigateTo进行跳转

下拉刷新:
我需要将我获取的列表重新赋值给一个值,并且进行判断 ,如果他的length小于等于0的话,会给出相应的提示。
并且如果当我的pagenum==1时 我会将我新的数据的值赋值给我的旧数组。
也会用到一个钩子函数onReachBottom 会让我的pagenum++ 并且小虹心渲染页面。
onReachBottom() {
console.log("999999")
this.pagenum++
this.getlist()
},
// 下拉刷新
let cate = res.data.message.goods
if (cate.length <= 0) {
uni.showToast({
title: "没有数据拉",
icon: "error"
})
return false
}
if (this.pagenum==1) {
this.listuser = cate
} else {
this.listuser.push(...cate)
}
}
钩子函数onPullDownRefresh 让我的pagenum==1,
并且重新渲染页面。
onPullDownRefresh() {
console.log("上拉加载", '00')
this.pagenum = 1
this.getlist()
},
在详情页⾯可以根据商品id来渲染页⾯
在详情页有加⼊ 加⼊购物车 :是根据效果来定义⼀个需要的数组 ⽤⼀个数组来接收,给点击购物车绑定⼀个点击事件 当点击后将数据保存
到数组⾥⾯并保存到本地存储⾥⾯,这样的话可以让数据不丢失 通过wx.setStorageSync ⽅法将数据保存 取的话可以使⽤
wx.getStorageSync ⽅法获取本地存储的数据
这⾥要注意 添加购物车要判断商品id是否⼀致,当id⼀致时就不会往数组⾥⾯添加,只会增加对应的商品数量
商品页面我们需要接受我们这个列表页面传过来得这个goods_id
还是一样的方法在这个onLoad来接受

接受成功以后我们需要请求数据 需要吧这些 商品页面的布局效果实现了
商品页面里面分为
1轮播图
2商品卡片区域
3.商品内容
4,。商品底部
渲染完成以后我们需要点击加入购物车 把商品我们想要的商品加入到购物车里面 需要本地存储 进行 我们给加入购物车给个绑定事件
当我们点击商品的时候加入到购物车
存储到本地存储中 商品的id值是否已经存在
判断是否已经存在 index>-1 点击多次的时候 进行num++
push一下 吧商品的名字 价格 数量 图片 还有这个checked进行添加
添加成功以后显示加入购物车成功的消息

let arr=uni.getStorageSync('cart') || [];是获取
uni.setStorageSync('cart',arr)是存
当我们点击购物车的时候 就可以跳转到购物车页面 就可以看到我们添加的商品都在这个购物车
我们需要在购物车这个按钮绑定一个事件
使用switchTab跳转
switchTab就是说:跳转到Tabar页面 跳转到应用内的某个页面 但是不允许跳转到tabar页面

添加到自己喜欢的商品以后 他就会到这个购物车里面 我们还有进行渲染就可以了
购车车功能有
1.跳转到购物车页⾯可以对保存的数据进⾏渲染,在购物车页⾯,需要实现对商品全选,反选,商品
我们需要在data里面定义 cartlist: uni.getStorageSync("cart") || [],就是我们获取的商品在本地存储里面的数据
checked: false 是否为true false
我们复制一个卡片 进行渲染就行了 我们就可以看到我们加入的购物车的内容
全选反选我们在want里面复制checkbox组件 绑定value属性 因为这里面不能使用v-modle
点击事件 为change事件 checkAll

这个e.detail 这个就是绑定点击通过来获取标签上绑定的值
反选:

总数量 总共个数 可以通过计算属性来实现:

这个加减我们在vant里面复制这个加减数量
使用插槽的方式

给他绑定点击事件:

来获取标签上绑定的值
这样购物车就可以实现啦
1.通过wx.getUserProfile({})获取用户头像,同时得到4个加密串 2.通过wx.login({}) 获取code码 3.传入4个加密串和code码,请求后台登录接口wx.request({}),获得token存储到本地 。!!!注释:appid开发者的账号id,appsecret开发者秘钥。openid所有微信用户的身份证id

支付流程:
1 先判断缓存中有没有token, 没有 跳转到授权页面 进行获取token
2 传入商品价格,数量等参数,请求接口,创建订单 获取订单编号
3拿到上一步的订单编号传入,请求预支付接口,获取到后台给的4个预支付加密串

拿到之后传入这4个加密串,调用微信支付的方法wx.requestPayment(pay)去进行支付
5 请求查询订单接口,后台返回支付情况,完成微信支付,提醒用户支付成功wx.showToast()。
6 删除缓存中 已经被选中了支付的商品
7再跳转页面
获取微信用户的收货地址:
2. 获取 用户 对小程序 所授予 获取地址的 权限 状态 scope
3. 获取收货地址 wx.chooseAddress
4 把获取到的收货地址 存入到 本地存储中

上传图片
1 调用小程序内置的 选择图片的 api wx.chooseImage(),
2 获取到 图片的临时路径 数组
3 把图片路径 存到 data的变量中
4 页面就可以根据 图片数组 进行循环显示 自定义组件


这个支付流程就是:
创建订单 准备支付 发起微信支付 查询订单
点击添加收货按钮的时候 ,我们需要在微信小程序里面找到api并找到开放接口 ,开放接口里面有个设置,将wx.getsetting复制到页面上 它主要是获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限,
并进行判断如果我的res里面的用户授权结果中的scope.address为true的话 就会获取用户收货地址。调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址。
// 点击收货地址按钮
address() {
uni.getSetting({
success(res) {
if (res.authSetting['scope.address'] == true) {
wx.chooseAddress({
success(res) {
console.log("55", res)
let adds = res
console.log(adds,"f")
adds.all = adds.provinceName + adds.cityName + adds.countyName + adds
.detailInfo
uni.setStorageSync("adduser", adds)
}
})
}
}
})
},
注意 !!!!!!!!!! 由于在后面我们需要做支付的操作 我们需要将地址进行拼接的方式 来进行本地存储。
点击购物车中的立即结算时 我们需要跳到订单页面,并且我们需要在本地存储中获取数据 并且筛选,
将我选中的筛选出来 渲染到页面上即可。
onShow(){
this.detailuser = uni.getStorageSync("detailuser") || []
// 过滤选中的
this.detailuser = this.detailuser.filter(item=>{
return item.checked
})
},
1.登录
在我的页面中有一个登录鉴权 ,当我点击登录鉴权按钮的时候 需要获取我的头像和基本信息。
我们需要获取token值 以此我们需要请求接口 接口里面传的encryptedData,rawData,
iv,signature,code。 因此我们需要来获取这些参数。
获取用户信息。uni.getUserProfile 页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo,并将我的个人信息存储到本地存储中去。
接下来 我们需要使用wx.login来获取登录凭证 code,通过凭证进而换取用户登录态信息,并将接口调用成功的回调函数 返回来的数据 进行结构赋值,请求接口,将我需要的参数来传进去,我们这里需要手动存储token值,
将token值存储到本地存储中去。这样登录就完成啦。
login() {
uni.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res, 2)
this.userInfo = res.userInfo
console.log(this.userInfo)
uni.setStorageSync("userInfo", this.userInfo)
this.gettoken(res)
}
})
},
async gettoken(res) {
let code = ""
await uni.login({
success(res1) {
if (res1.code) {
code = res1.code
// 结构赋值
let {
encryptedData,
rawData,
iv,
signature,
} = res
let data = {
encryptedData,
rawData,
iv,
signature,
code
}
console.log(data, "0")
gettoken(data).then(res => {
console.log(res, "登录11")
// 手动token值
let token =
"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjIzLCJpYXQiOjE1NjQ3MzAwNzksImV4cCI6MTAwMTU2NDczMDA3OH0.YPt-XeLnjV-_1ITaXGY2FhxmCe4NvXuRnRB8OMCfnPo"
uni.setStorageSync("token", token)
if (token) {
uni.setStorageSync("hasUserInfo", true)
} else {
uni.getStorageSync("hasUserInfo", false)
}
})
}
}
})
},
点击选择图片的按钮 进行选择图片wx.chooseImage,选择图片的回调sussess中将图片临时路径定义在全局变量 在进行渲染到页面上,选择图片之后点击图片上传按钮 进行遍历要上传的图片 请求api,api中的name时默认值,传递请求头(header:{"Authorization": wx.getStorageSync('token')}),在上传成功的回调中判断当前是否为最后一张 ,(当前遍历索引值index==arr.length-1),如果是最后一张的话就进行提示用户图片上传成功
// 图片上传
img1() {
// console.log("99")
uni.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
console.log(res, '3030')
// // tempFilePath可以作为 img 标签的 src 属性显示图片
// const tempFilePaths = res.tempFilePaths
this.imgcon.push(...res.tempFilePaths)
console.log(this.imgcon, "6")
}
})
},
img2() {
// console.log(222)
this.imgcon.forEach(item => {
wx.uploadFile({
url: 'http://lianghj.top:8888/api/private/v1/upload', //仅为示例,非真实的接口地址
filePath: item,
name: 'file',
formData: {
'user': 'test'
},
header:{
"Authorization":uni.getStorageSync("token")
},
success(res) {
console.log(res, "555")
const data = res.data
//do something
},
fail(error){
console.log(error,"error")
}
})
})
}
点击我的页面中的全部订单 待付款 代收款 会跳到另一个页面,需要渲染数据 ,需要请求接口,接口里面传的参数值为type 他为number类型 所以我们得到type之后 需要将他进行一个数据类型转换。
我们需要通过onload参数,实现页面传值, 来判断token值是否存在 如果没有token值 则跳到我的页面 ,
我们需要将我们的type值进行number数据类型转换。给tab栏绑定一个change事件,tab栏切换时调用索引一般都是从0开始的,我们需要获取被点击的标题索引值,并且重新发送请求,然后请求接口 ,将type值传进去,
将后台返回给我们的数据 渲染到页面上。
//通过onload参数,实现页面传值
onLoad(options) {
console.log(options.type, 56)
//判断token
const token = uni.getStorageSync("token");
if (!token) {
wx.navigateTo({
url: '/pages/my/my'
});
return;
}
// console.log('页面加载时信息', options.type);
// 4 激活选中页面标题 当 type=1 index=0
let type = Number(options.type)
// this.active = type - 1
// console.log(this.active)
this.getOrders(type);
},
methods: {
//tab切换时调用——索引是从0开始的
tabsChange(e) {
// 1 获取被点击的标题索引
console.log('获取索引', e.detail.index);
// 2 重新发送请求 type=1 index=0
this.getOrders(e.detail.index + 1);
},
async getOrders(type) {
// const Authorization = uni.getStorageSync("token")
// const res = await uni.request({
// url: "my/orders/all",
// data: {
// type:type
// },
// })
look({"type":type}).then(res=>{
console.log('订单列表', res);
this.orders = res.data.message.orders
console.log(this.orders)
})
1.支付
在订单页面上进行支付的操作,当我们点击支付按钮的时候,需要先判断一下token值 ,如果不存在token值,跳转到我的页面,
需要创建订单,而我们需要传的参数有订单总价格 和收货地址 和订单数组。订单数据里面又包括商品id和购买的数量和商品的单价
获取订单数组:
我们需要将存有数据列表的数组进行循环 将我列表的相应数据来进行赋值
获取地址:
在购物车页面已经把地址进行拼接的形式存储到本地存储了 我们可以直接获取本地存储的数据即可。
获取总价格:
和购物车中的获取总价格一样。
把以上获取完毕之后,我们在请求接口,并将这三个数据传给后台,后台会给我们返回相应的数据,
做预付订单的时候,我们需要用到订单编号。
delet1(){
// console.log(11)
// 判断有没有token值
let token = uni.getStorageSync("token")
console.log(token, '00')
if (!token) {
uni.navigateTo({
url:"/pages/my/my"
})
}
let goods =[]
// 获取订单数组
this.detailuser.map(item=>{
goods.push({
goods_id:item.id,
goods_number:item.num,
goods_price:item.price
})
})
console.log(goods,5)
// 传值
let data = {
"order_price": this.money,
"consignee_addr":this.adduser.all ,
"goods": goods
}
// 请求接口
pay(data).then(res=>{
console.log(res,'res1')
做完支付,后台返回来给我们的数据,主要就是来获取订单编号,我们需要进行结构赋值,将订单编号来提取出来,然后请求获取支付参数的接口,里面需要传订单编号。将我们提取出来的订单编号以参数的形式传给后台即可 ,并将后台返回来给我们的数据 来进行对应的提示。
let order_number = res.data.message.order_number
// 请求接口
payfor({"order_number":order_number}).then(res=>{
console.log(res,"0")
// 判断
if(res.data.meta.status==200){
uni.showToast({
title:res.data.meta.msg,
icon:"success"
})
}
SPI接收数据左移一位问题目录SPI接收数据左移一位问题一、问题描述二、问题分析三、探究原理四、经验总结最近在工作在学习调试SPI的过程中遇到一个问题——接收数据整体向左移了一位(1bit)。SPI数据收发是数据交换,因此接收数据时从第二个字节开始才是有效数据,也就是数据整体向右移一个字节(1byte)。请教前辈之后也没有得到解决,通过在网上查阅前人经验终于解决问题,所以写一个避坑经验总结。实际背景:MCU与一款芯片使用spi通信,MCU作为主机,芯片作为从机。这款芯片采用的是它规定的六线SPI,多了两根线:RDY和INT,这样从机就可以主动请求主机给主机发送数据了。一、问题描述根据从机芯片手
前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU
@作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors 1、什么是behaviors 2、behaviors的工作方式 3、创建behavior 4、导入并使用behavior 5、behavior中所有可用的节点 6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors 1、什么是behaviorsbehaviors是小程序中,用于实现
文章目录一、项目场景二、基本模块原理与调试方法分析——信源部分:三、信号处理部分和显示部分:四、基本的通信链路搭建:四、特殊模块:interpretedMATLABfunction:五、总结和坑点提醒一、项目场景 最近一个任务是使用simulink搭建一个MIMO串扰消除的链路,并用实际收到的数据进行测试,在搭建的过程中也遇到了不少的问题(当然这比vivado里面的debug好不知道多少倍)。准备趁着这个机会,先以一个很基本的通信链路对simulink基础和相关的debug方法进行总结。 在本篇中,主要记录simulink的基本原理和基本的SISO通信传输链路(QPSK方式),计划在下篇记
提供3种Ubuntu系统安装微信的方法,在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信:ubuntu20.04安装最新版微信--可以支持微信最新版,但是适配的不是特别好;比如WeChartOCR.exe报错。2.原生微信安装:linux系统下的微信安装(ubuntu20.04)--微信适配的最好,反应最快,但是微信版本只到2.1.1,版本太老,很多功能都没有。3.深度deepin-wine6安装微信:ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好,当前个人使用此种方法1个月,微信版本3.4;没什么大问题,尚可。一、WineHQ7.0安装微信
对传统的餐饮商家来说,小程序很好地解决了餐厅线下线上连接的问题,在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序,商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式:1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同
技术选型1,前端小程序原生MINA框架cssJavaScriptWxml2,管理后台云开发Cms内容管理系统web网页3,数据后台小程序云开发云函数云开发数据库(基于MongoDB)云存储4,人脸识别算法基于百度智能云实现人脸识别一,用户端效果图预览老规矩我们先来看效果图,如果效果图符合你的需求,就继续往下看,如果不符合你的需求,可以跳过。1-1,登录注册页可以看到登录页有注册入口,注册页如下我们的注册,需要管理员审核,审核通过后才可以正常登录使用小程序1-2,个人中心页登录成功以后,我们会进入个人中心页我们在个人中心页可以注册人脸,因为我们做人脸识别签到,需要先注册人脸才可以进行人脸比对,进
在开发微信小程序的时候,我们可能需要开发环境和测试环境,或者其他环境,下面是切换环境的方法。首先需要明确的是:前端的页面代码是不区分环境的,环境的区分指的是云函数、云数据库、云存储这些。1、更改云函数的使用云环境这里我们从cloud1更改为test-cloud,这个改完是没有用的,因为在前端代码指定了使用的云环境。cloudfunctions文件和miniprogram文件虽然都在一个目录下,但是这两个没有直接联系。2、在evList.js中添加自己云环境evList.js存储了云环境列表,这里把test-cloud加到这个列表里,需要填写envId和alias,参照cloud1写就行。3、更
【动态规划】一、背包问题1.背包问题总结1)动规四部曲:2)递推公式总结:3)遍历顺序总结:2.01背包1)二维dp数组代码实现2)一维dp数组代码实现3.完全背包代码实现4.多重背包代码实现一、背包问题1.背包问题总结暴力的解法是指数级别的时间复杂度。进而才需要动态规划的解法来进行优化!背包问题是动态规划(DynamicPlanning)里的非常重要的一部分,关于几种常见的背包,其关系如下:在解决背包问题的时候,我们通常都是按照如下五部来逐步分析,把这五部都搞透了,算是对动规来理解深入了。1)动规四部曲:(1)确定dp数组及其下标的含义(2)确定递推公式(3)dp数组的初始化(4)确定遍历顺