微信小程序(由浅到深)

一. 项目基本配置

1. 项目组成

在这里插入图片描述

2. 常见的配置文件解析

  • project.config.json:项目配置文件, 比如项目名称、appid等 ; 配置详情
  • sitemap.json:小程序搜索相关的;配置详情
  • app.json:全局配置
  • page.json:页面配置;
  • app.js 可共享全局属性值

3. app.json全局的五大配置

  • pages: 页面路径列表
    • 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。
    • 小程序中所有的页面都是必须在pages中进行注册的。
  • window: 全局的默认窗口展示
    • 用户指定窗口如何展示, 其中还包含了很多其他的属性
  • tabBar: 顶部tab栏的展示
  • 详情配置参考
{"pages": ["pages/home/home"],"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#f6f866","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"tabBar": {"color": "#777","selectedColor": "#1cb9ce","list": [{"pagePath": "pages/home/home","text": "主页面”},{"pagePath": "pages/day02/day02","text": "home"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

4.单个页面中的page配置

  • 可直接新建page 并回车,自动添加到pages中 或者在pages中直接指定
    在这里插入图片描述

  • 同时每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。

    • 页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项
    • 具体配置参考官网
{"usingComponents": {},"navigationBarTitleText": "主页面","backgroundTextStyle": "dark",  背景文字颜色"enablePullDownRefresh": true,  允许下拉刷新"backgroundColor":"#f70", 		背景颜色"onReachBottomDistance": 100     距离底部多少触发事件
}
  // 下拉刷新, 获取最新的数据onPullDownRefresh() {console.log('监听下拉刷新');// 停止下拉刷新setTimeout(() => {// 异步请求wx.stopPullDownRefresh({success: (res) => {console.log('停止', res)},})}, 1000)},// 监听页面滚动到底部onReachBottom() {console.log('滚动到底部多少距离时加载更多~~  100px');this.setData({listCounter: this.data.listCounter + 30})}

5. App函数

  • App()实例可以全局共享的(单例对象),所以可以将一些共享数据放在这里;
  • App函数的参数

作用一

  • 判断群聊会话中打开、小程序列表中打开、微信扫一扫打开、另一个小程序打开
    • 在onLaunch和onShow生命周期回调函数中的options参数,判断scene
    • 文档参考

作用二:定义全局App的数据

  • app.js
 // app实例可以共享全局数据globalData: {userInfo: null,token: 'Afjwt-12mandak-45'}
  • home.js
 onLoad() {const {globalData} = getApp() // 全局的app实例console.log(globalData.token);// 拿到token发送网络请求-页面初始化this.setData({globalData})},

作用三:生命周期函数

  • 在生命周期函数中,完成应用程序启动后的初始化操作
    • 完成登录操作,获取token
      在这里插入图片描述

6.tabBar配置

  • tabBar中只能配置最少 2 个、最多 5 个 tab 页签
  • 当渲染顶部 tabBar 时,不显示 icon,只显示文本
  • 更多配置参考官网
    在这里插入图片描述
{"pages": ["pages/hone/hone","pages/Profile/Profile","pages/experience/experience","pages/skill/skill","pages/index/index","pages/logs/logs"],"tabBar":{"color": "#777","selectedColor": "#1cb9ce","list":[{"pagePath": "pages/hone/hone","text":"简历信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},{"pagePath": "pages/skill/skill","text":"个人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},{"pagePath": "pages/experience/experience","text":"项目经历","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},{"pagePath": "pages/Profile/Profile","text":"自我评价","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}]},"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

二. 基本语法,事件,单位

1. 语法

参考官网基本语法解释

  • 文本渲染
{{ msg}}可以执行简单的js表达式
{{2+3}}
{{msg.length}}
  • 条件渲染
wx:if=""
wx:elif=""
wx:else
hidden   // true 隐藏
  • 列表渲染
  • wx:key 针对不同的数组类型有不同的写法
    • 普通数组 wx:key="*this"
    • 数组对象 wx:key="字符串" 表示对象唯一属性
// 默认item就是数据 ,index是下标
wx:for="{{list}}"
wx:key="index"{{item}}{{index}}
  • 自定义列表渲染
定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

2. 事件

格式:<元素 bind事件名= “回调”>

  • 示例:<view bindtap="fn1"></view>
  • <switch bindchange="fn2"></switch>
  • 小程序中绑定事件,通过bind和capture关键字来实现。如 bindtap 和 capture-bind:tap,
  • bind 是事件冒泡外传,capture 是事件捕获里传capture-bind只能用冒号形式。
  • 如果想阻止事件冒泡或捕获可通过catch来绑定事件。如catchtap,capture-catch:tap。
bindInput     表单输入时
bindconfirm    表单输入确认
bindtap      点击时候

在这里插入图片描述

  • 事件传参

    • 自定义参数 data-*
      在这里插入图片描述
      注意点: <view bindtap="handleTap(100)"></view> 小程序会以为 事件函数名称就是 “handleTap(100)” ,那么它就会去找“handleTap(100)” 这个函数 而不是 “handleTap”
  • mask传参
    在这里插入图片描述

  • 表单绑定

<input value="{{s1}}" bindinput="inputHd">
// js.js
inputHd(e){this.setData({s1:e.detail.value})  // 表单的值获取:e.detail.value
}
  • 事件对象属性
属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组
  • target和currentTarget事件对象属性
属性类型说明
idString当前组件的id
datasetObject当前组件上由data-开头的自定义属性组成的集合
  • 区别

taget点击inter不能拿到dataset数据currentTarget可以拿到

在这里插入图片描述

3. 单位

  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
  • 具体参考官网

三. 数据响应式修改

  1. WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层
  2. 小程序的渲染层和逻辑层分别由2个线程管理,两个线程的通信会经由微信客户端做中转

在这里插入图片描述

  • 数据修改必须调用 this.setData 同react一样
  • setData优化

四 . 内置组件

  • 内置组件参考

1. button

  • button组件中的 open-type属性
    • open-type用户获取一些特殊性的权限,可以绑定一些特殊的事件
  • 老旧版本获取用户信息
<button type="primary" bindgetuserinfo="getUserInfo" size="mini" open-type="getUserInfo">getUserInfo</button>
  getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})},
  • 新版本获取用户头像等信息
   <button bindtap="getUserProfile"> 获取头像昵称 </button>
  getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写success: (res) => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},
  • 具体解析参考官网

2. image

  • image组件默认宽度320px、高度240px
  • image支持懒加载
  • mode 配置如下
模式说明
缩放scaleToFill不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片,直到图片某一边碰到边界。
缩放aspectFill保持纵横比缩放图片,直到图片完全铺满边界。
缩放widthFix宽度不变,高度自动变化,保持原图宽高比不变

  • wx.chooseMedia获取本地图像展示
<button bindtap="hyImageUpload">选择图片上传</button>
<!-- 选择本地图片 -->
<image src="{{imageUrl}}"></image>
 hyImageUpload(){wx.chooseMedia({camera: 'image',}).then(res=>{this.setData({imageUrl:res.tempFiles[0].tempFilePath})})}

3. input

  • 支持双向绑定
<input type="text" model:value=" {{message}}"/>

4. 组件共有属性

  • 公共属性 :参考官网
    • 属性名类型描述注解
      idString组件的唯一标示保持整个页面唯一
      classString组件的样式类在对应的 WXSS 中定义的样式类
      styleString组件的内联样式可以动态设置的内联样式
      hiddenBoolean组件是否显示所有组件默认显示
      data-*Any自定义属性组件上触发的事件时,会发送给事件处理函数
      bind* / catch*EventHandler组件的事件详见事件

五 . WXS使用

  • WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
  • 在WXML中是不能直接调用Page/Component中定义的函数的.
  • 但是某些情况, 可以使用函数来处理WXML中的数据(类似于Vue中的过滤器),这个时候就使用WXS了
  • 必须利用es5语法
// 
<wxs module="format">function joinTgether(num) {return '¥' + num}// 必须模块化导出 module.exports={joinTgether:joinTgether}
</wxs><block wx:for="{{wxs}}" wx:key="*this"><button size="mini" type="warn">{{item}}-{{format.joinTgether(item)}}</button>
</block>
  • 模块抽离utils 必须放在.wxs结尾的文件
<button>模块抽离wxs</button>
<wxs module="format" src="/utils_wxs/format.wxs"></wxs>
<block wx:for="{{wxs}}" wx:key="*this"><button size="mini" type="warn">{{item}}-{{format.joinTgether(item)}}</button>
</block>

在这里插入图片描述

  • 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见;
  • 一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现;
  • 其他使用参考官网

六,组件

6.1 全局与局部组件注册使用

  • 将页面拆分成一个个小的、可复用的组件,这样更加方便组织和管理,并且扩展性也更强
  • .json 文件中进行自定义组件声明(将component 字段设为 true 可这一组文件设为自定义组件):

在这里插入图片描述

  • 在需要使用的xx.json 文件中导入
{"usingComponents": {"sel-info": "/components/selection-info/sel-info"}
}
  • 自定义组件和页面所在项目根目录名 不能以“wx-”为前缀,否则会报错。
  • 全局组件在app.json的usingComponents声明某个组件,那么所有页面和组件可以直接使用该组件

6.2 组件样式

  • 组件内的样式 对 外部样式 的影响

    • 结论一:组件内的class样式,只对组件wxml内的节点生效, 对于引用组件的Page页面不生效。
    • 结论二:组件内不能使用id选择器、属性选择器、标签选择器
      在这里插入图片描述
  • 外部样式 对 组件内样式 的影响

    • 结论一:外部使用class的样式,只对外部wxml的class生效,对组件内是不生效
    • 结论二:外部使用了id选择器、属性选择器不会对组件内产生影响
    • 结论三:外部使用了标签选择器,会对组件内产生影响
  • 如何让class可以相互影响

    • Component对象中,可以传入一个options属性,其中options属性中有一个styleIsolation(隔离)属性。
    • styleIsolation有三个取值:
      • isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(默认取值);
      • apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
      • shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置 了
  options: {// styleIsolation:"isolated"  // 默认值styleIsolation: "apply-shared"},

6.3 组件之间的通信

  • 文档参考
    在这里插入图片描述
    组件传递数据 - properties

在这里插入图片描述

  1. 定义子组件
<view style="width: 100%;height:80px;background-color: blueviolet;"><button>{{title}}</button><view style="background-color: brown;margin-top: 10px; color: cornsilk;"> {{content}}</view>
</view>
  1. 子组件做数据接收并默认值
 properties: {title: {type: String,value: '默认标题'},content:{type:String,value:'默认内容'}},
  1. 父组件使用子组件并传递值
<props-data />
<view class="styl"><props-data title="通信" content='组件通信-传递参数-动态数据' />
</view>
<props-data title="z组件传参" content='组件通信-传递参数-动态数据' />

组件传递样式 -externalClasses

  • 在Component对象中,定义externalClasses属性
  • 在组件内的wxml中使用externalClasses属性中的class
  • 在页面中传入对应的class,并且给这个class设置样式
    在这里插入图片描述
    自定义事件
    在这里插入图片描述
    页面直接调用组件方法 相当于vue中ref
    • 可在父组件里调用 this.selectComponent ,获取子组件的实例对象。
    • 调用时需要传入一个匹配选择器 selector,
      在这里插入图片描述

6.4 单个插槽的使用

  • 组件的插槽也是为了让我们封装的组件更加具有扩展性

在这里插入图片描述

  • 注意slot 不支持默认值 可以利用兄弟选中器解决

在这里插入图片描述

  1. 子组件预留插槽
<view class="myslot"><view class="header">header</view><!-- 小程序插槽不支持默认值 --><view class="content"><slot></slot></view><view class="default">兄弟选择器解决默认值</view><view class="footer">footer</view>
</view>
  1. 父组件传递结构
<my-slot><button>按钮</button>
</my-slot>
<my-slot><button size="mini" type="primary">default样式</button>
</my-slot>
<my-slot>
</my-slot>
  1. 兄弟选择器解决默认值问题
.default{display: none;
}
.content:empty + .default{display: block;
}

6.5 多个插槽的使用

在这里插入图片描述

  1. 子组件预留插槽
<view class="slot"><view class="t"><text >上插槽</text> : <slot name="t"></slot></view><view class="c"><text>中间插槽</text> : <slot name="c"></slot></view><view class="b"><text>下插槽</text> : <slot name="b"></slot></view>
</view>
  1. 允许可以定义多个插槽
Component({// 允许定义多个插槽options: {multipleSlots: true},
})
  1. 父组件传递结构

<more-slot><text slot="t">上插入</text><text slot="c">中间插入</text><text slot="b">下插入</text>
</more-slot>

6.6 混入

  • behaviors 是用于组件间代码共享的特性,类似于Vue中的 “mixins”
    • 每个 behavior 可以包含一组属性、数据、生命周期函数和方法;
    • 组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用;
    • 每个组件可以引用多个 behavior ,behavior 也可以引用其它 behavior
    • 文档参考
  1. 编写混入
export const counterMinxin = Behavior({data: {counter: 100},methods: {add() {//  加一修改 ,不应该使用++,这会导致counter在修改this..data.counter也在修改this.setData({counter: this.data.counter + 1})}}
})
  1. 使用
import { counterMinxin } from "../../behaviors/counter"
Component({behaviors: [counterMinxin],
})

6.7 组件生命周期

  • 组件的的生命周期在 lifetimes 字段内进行声明
  • 组件生命周期文档参考
Component({behaviors: [counterMinxin],lifetimes:{created(){console.log('组件被创建');},attached(){console.log('组件添加到dom树中');},detached(){console.log('组件被删除');}}
})

6.8 数据侦听

文档参考链接

七 .生命周期

7.1.应用生命周期

应用生命周期钩子函数

属性说明
onLaunch生命周期回调——监听小程序初始化。
onShow生命周期回调——监听小程序启动或切前台。
onHide生命周期回调——监听小程序切后台。
onError错误监听函数。
  • 参数对象
    • 一般放在生命周期钩子函数的第一个参数。onLaunch钩子函数的参数对象为
      在这里插入图片描述

7.2 页面生命周期

  • 文档参考
属性说明
onLoad生命周期回调—监听页面加载
onShow生命周期回调—监听页面显示
onReady生命周期回调—监听页面初次渲染完成
onHide生命周期回调—监听页面隐藏
onUnload生命周期回调—监听页面卸载
onPullDownRefresh监听用户下拉动作
onReachBottom页面上拉触底事件的处理函数
onShareAppMessage用户点击右上角转发
onShareTimeline用户点击右上角转发到朋友圈
onAddToFavorites用户点击右上角收藏
onPageScroll页面滚动触发事件的处理函数
onResize页面尺寸改变时触发,详见 响应显示区域变化
 // 1. 页面路径 pages/index/index?id=10086&name='admin'// 2. onLoad 获取参数onLoad(query){}

7.3.组件生命周期

  • 文档参考
属性说明
created组件生命周期函数 - 在组件实例刚刚被创建时执行,注意此时不能调用 setData )
attached组件生命周期函数 - 在组件实例进入页面节点树时执行)
ready组件生命周期函数 - 在组件布局完成后执行)
moved组件生命周期函数 - 在组件实例被移动到节点树另一个位置时执行)
detached组件生命周期函数 - 在组件实例被从页面节点树移除时执行)

八 . API解析

8.1网络请求

  • 网络请求: wx.request(Object object)
  • 官网参考
  wx.request({url: "api",data: {page: 1},success: res => {console.log(res);},fail: err => {}})
  • 封装

//0. 封装成函数
export function hyRequest(options) {return new Promise((resolve, reject) => {wx.request({...options,success: res => {resolve(res.data)},fail: reject})})
}//0. 类的方法封装
class hyService {request(options) {return new Promise((resolve, reject) => {wx.request({...options,success: res => {resolve(res.data)},fail: reject})})}get(options) {return this.request({ ...options, method: 'GET'})}post(options) {return this.request({...options,method: 'POST'})}
}
export const serviceResponse = new hyService()
// 1. 导入
import {hyRequest} from '../../service/request'
// 2. 使用封装调用apihyRequest({url:"http://123.207.32.32:1888/api/city/all"}).then(res=>{console.log(res);})

8.2 展示弹窗效果

  • 具体配置参考在这里插入图片描述

8.3 获取设备|位置信息

  • 获取当前设备的信息,用于手机信息或者进行一些适配工作wx.getSystemInfo(Object object)
  • 官网参考
  • 获取用户的位置信息,以方便给用户提供相关的服务wx.getLocation(Object object)
reqInfo() {// 获取设备信息// 我们需要经常获取当前设备的信息,用于手机信息或者进行一些适配工作wx.getSystemInfo({success: arr => {console.log(arr);}}),wx.getLocation({success:err=>{console.log(err);}})}
  • 注意获取位置信息需要相关权限
  • 配置参考
 "permission": {"scope.userLocation": {"desc": "位置信息将用于小程序位置接口的效果展示"}}

8.4 Storage存储

  • 同步存取数据的方法:
    • wx.setStorageSync(string key, any data)
    • wx.getStorageSync(string key)
    • wx.removeStorageSync(string key)
    • wx.clearStorageSync()
  • 异步存储数据的方法:
    • wx.setStorage(Object object)
    • wx.getStorage(Object object)
    • wx.removeStorage(Object object)
    • wx.clearStorage(Object object)
  • 具体使用参考

8.5 页面跳转

  • 通过navigator组件 和 通过wx的API跳转
  • 路由跳转参考配置
    在这里插入图片描述
    页面跳转 - navigateTo
    注意 跳转的页面是tarBar内的页面,需要使用wx.switchTab({})
 navigateTo() {// 跳转的页面是tarBar内的页面,需要使用wx.switchTab({}) wx.navigateTo({// url: '/navPage/navigateTo/index',// 传参url: '/navPage/navigateTo/index?name=admin',})}
  • 接受页面跳转的参数
Page({// options接受路径参数onLoad(options) {console.log(options);},
})

8.6 回退页面传参

  • 主页面
Page({navigateTo() {// 方式二wx.navigateTo({url: '/navPage/navigateTo/index?name=admin',events: {backEvent(data) {console.log('接受跳转的参数', data);}}})}
})
  • 跳转的页面
Page({up() {wx.navigateBack()// //  传递数据给上一级// const pages = getCurrentPages()// //读取最后一个页面,的实例// const prePage = pages[pages.length - 2]// // 设置上一个页面的数据// prePage.setData({//   message: 'admin'// })// console.log(pages);const eventChannel = this.getOpenerEventChannel()eventChannel.emit('backEvent', {name: 'admin',pad: 'password'})},// 回退过多可以直接在onLoad里面设置onUnload() {const pages = getCurrentPages()const prePage = pages[pages.length - 2]prePage.setData({message: 'admin',username: 'password'})},
})

九 .登录流程

  • 配置参考
    在这里插入图片描述
    openid: 用户唯一标识
    session_key: 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥
// 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, unionIdconst code = res.codewx.request({url: 'url',data: {code},method: 'POST',success: res => {const token = res.data.tokenwx.setStorageSync('token', token)}})}})},
})
  • 参考文章
    • 微信小程序开发(超详细保姆式教程)
    • coderwhy

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/36288.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s常用资源管理 控制

目录 Pod&#xff08;容器组&#xff09;&#xff1a;Pod是Kubernetes中最小的部署单元&#xff0c;可以包含一个或多个容器。Pod提供了一种逻辑上的封装&#xff0c;使得容器可以一起共享网络和存储资源 1、创建一个pod 2、pod管理 pod操作 目录 创建Pod会很慢 Pod&…

什么是事务,并发带来的事务问题以及事务隔离级别(图文详解)

一、什么是事务&#xff1f; 简单说就是逻辑上的一组操作&#xff0c;要么都执行&#xff0c;要么都不执行。 举个例子&#xff0c;假如小明要给小红转账100元&#xff0c;这个转账会涉及到两个关键操作&#xff1a;①将小明的余额减少100元。 ②将小红的余额增加100元 。但…

学习笔记整理-JS-04-流程控制语句

文章目录 一、条件语句1. if语句的基本使用2. if else if多条件分支3. if语句算法题4. switch语句5. 三元运算符 二、循环语句1. for循环语句2. for循环算法题3. while循环语句4. break和continue5. do while语句 三、初识算法1. 什么是算法2. 累加器和累乘器3. 穷举法4. 综合算…

设计模式(2)工厂方法模式

一、 1、介绍&#xff1a;定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。工厂方法使一个类的实例化延迟到其子类。简单工厂模式的最大优点在于工厂类中包含了必要的逻辑判断&#xff0c;根据客户端的选择条件动态实例化相关的类&#xff0c;对于客户端来说…

odoo-034 float 浮点数比较

文章目录 前提问题解决总结 前提 odoo 版本&#xff1a;13 python&#xff1a;3.6.9 问题 比较销售订单行中已送货跟已开票&#xff0c;在 tree 视图显示搜索后的结果。发现搜索条件为已送货 > 已开票时&#xff0c;结果中会包含已送货已开票的。 解决 把这两个值打印出…

LeNet中文翻译

Gradient-Based Learning Applied to Document Recognition 基于梯度的学习应用于文档识别 摘要 使用反向传播算法训练的多层神经网络构成了成功的基于梯度的学习技术的最佳示例。给定适当的网络架构&#xff0c;基于梯度的学习算法可用于合成复杂的决策表面&#xff0c;该决策…

【Vue-Router】使用 prams 路由传参失效

报错信息&#xff1a; [Vue Router warn]: Discarded invalid param(s) “name”, “price”, “id” when navigating. list.json {"data": [{"name": "面","price":300,"id": 1},{"name": "水",&quo…

考研408 | 【计算机网络】 网络层

导图 网络层&#xff1a; 路由器功能&#xff1a;转发&路由选择 数据平面 数据平面执行的主要功能是根据转发表进行转发&#xff0c;这是路由器的本地动作。 控制平面 1.传统方法/每路由器法&#xff1a; 2.SDN方法&#xff08;Software-Defined Networking) 控制平面中的…

html实现商品图片放大镜,html图片放大镜预览

效果 实现 复制粘贴&#xff0c;修改图片路径即可使用 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>商品图片放大镜</title></head><style>body {margin: 0;padding: 0;}#app {padding: 10px;posit…

关于青少年学习演讲与口才对未来的领导力的塑造的探析

标题&#xff1a;青少年学习演讲与口才对未来领导力的塑造&#xff1a;一项探析 摘要&#xff1a; 本论文旨在探讨青少年学习演讲与口才对未来领导力的塑造的重要性和影响。通过分析演讲和口才对青少年的益处&#xff0c;以及如何培养这些技能来促进领导力的发展&#xff0c;我…

Harmony创建项目ohpm报错

Harmony创建FA模型的项目时报如下错&#xff1a; The registry is empty - edit .ohpmrc file or use "ohpm config set registry your_registry" command to set registry.解决方法&#xff1a; File -> Settings -> Build,Execution,Deployment -> Ohpm …

docker可视化工具Portainer

1:Portainer简介 Portainer是一个docker可视化管理工具&#xff0c;可以非常方便地管理docker镜像容器。官网地址&#xff1a;https://www.portainer.io/ 注&#xff1a;现在Portainer有BE&#xff08;收费&#xff09;和CE&#xff08;免费&#xff09;版本&#xff0c;安装的…

【音视频、chatGpt】h5页面最小化后,再激活后视频停住问题的解决

目录 现象 观察 解决 现象 页面有时候要切换&#xff0c;要最小化&#xff1b;短时间或者几个小时内切换回来&#xff0c;视频可以正常续上&#xff1b;而放置较长时间&#xff0c;几个小时或者一晚上&#xff0c;切换回来后&#xff0c;视频可能卡死 观察 切换页面&#x…

【解读Spikingjelly】使用单层全连接SNN识别MNIST

原文档&#xff1a;使用单层全连接SNN识别MNIST — spikingjelly alpha 文档 代码地址&#xff1a;完整的代码位于activation_based.examples.lif_fc_mnist.py GitHub - fangwei123456/spikingjelly: SpikingJelly is an open-source deep learning framework for Spiking Neur…

【自用】终端设备(ESP32-S3)连接云服务器 HomeAssistant + MQTT 物联网平台

总览 1.流程概述 2.开始搭建&#xff01; 3. 一、流程概述 0.总体流程 二、开始搭建 1.下载 MQTTX 客户端&#xff08; 在PC上 &#xff09; https://mqttx.app/zh/downloads 2.新建 MQTTX 连接 0.点击左侧的加号&#xff0c;开始新建连接。 一共需要填写几个参数&#…

会玩这 10 个 Linux 命令,一定是个有趣的 IT 男!

Linux当中有很多比较有趣的命令&#xff0c;可以动手看看&#xff0c;很简单的。 1.rev命令 一行接一行地颠倒所输入的字符串。 运行&#xff1a; $rev如输入&#xff1a;shiyanlou shiyanlou2.asciiview命令 1.先安装aview $sudo apt-get install aview2.再安装imagema…

vue中封装自动计算比例滑块

此插件为另一位漂亮的前端同事小姐姐封装,觉得非常好用于是决定记载下来,便于复用 如图需要动态传入需要分配权重的数组,平均分配可以自动将100%平均分给数组中的值 如果手动拖拽,则会自动计算可拖动最大区域,便于最终总权重必定为100% <el-alert class"merge-alert&…

zookeeper常用命令

zookeeper常用命令 1. 下载安装2. 配置说明2.1 配置 3. zookeeper的常见命令3.1 server端启动停止等命令3.2 客户端连接等命令3.3 客户端简单常用命令3.3.1 查看目录&#xff08;查看数据结构&#xff09;3.3.2 删除目录3.3.3 创建目录3.3.4 创建目录并写入值 查看节点值3.3.5…

Apache JMeter:完全指南

Apache JMeter 是一款开源的性能测试工具&#xff0c;可以用于测试 Web 应用程序、FTP 服务器、数据库等各种类型的服务器。本文将以 JMeter 5.5 为例介绍 JMeter 的使用方法。 下载和安装 由于 JMeter 是使用 Java 开发的&#xff0c;因此在运行之前必须先安装 JDK。您可以在…

Android中tools属性的使用

参考&#xff1a; 1.Android:Tools命名空间原来是有大用处的 2.Android中tools属性的使用 3.工具属性参考文档 4. 命名空间介绍 5. 注解 6. lint 7. 资源压缩shrink-resources 目录 一、概述二、引入tools命名空间三、tools 命名空间的作用有哪些&#xff1f;四、tools 命名空间…