![](https://img-blog.csdnimg.cn/f83996ce5f024ce6a19964793b566ba5.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
文章平均质量分 54
笔记
Raccom
这个作者很懒,什么都没留下…
展开
-
uniapp scrollview 滚动最新位置
效果是模拟发送聊天信息,需要scrollview在收到新消息时滚动到底部最新的位置。如果恰好你需要隐藏scrollview的滚动条,那就可以加上这个代码。/*每个页面公共css */项目是vue2的,代码如下。原创 2023-08-23 12:00:47 · 1627 阅读 · 0 评论 -
uniapp 微信小程序webview 踩坑
微信小程序的存在许多功能上的限制和约束,有些情况不得不去使用webview进行开发实现需求,比如原生无法满足(例如某团队维护SDK 只提供了WEB端jsSDK,且不维护小程序SDK)H5可以同时适用多端(适用范围更广)H5可以弥补小程序部分欠缺微信生态有部分限制(包大小,设计规范等)由于最近做的需求小程序不支持播放带有透明通道的视频,所以转到了webview这里总结下完整的开发流程和现有的各种解决方案: 开发阶段需要将不校验合法域名勾选上。原创 2023-08-31 14:36:56 · 5504 阅读 · 0 评论 -
vue3下的uniapp跨域踩坑
开发移动端H5的时候由于后端接口没有做跨域处理,因此需要做下服务器代理,于是百度搜索了uniapp下h5的跨域配置在manifest下的h5配置proxy但是配置完后,怎么都不生效,一直返回404,开始以为是没重启项目,端口占用等等一系列的问题逐个排查后发现,配置生效了,服务器的确是代理了,但是的地址重写不会生效查看uniapp文档是webpack的写法,因此在vue2的项目中不存在这个问题,vue3中使用的vite需要使用函数写法重写路径,但是json不支持写函数,因此无法重写路径。原创 2023-07-25 16:33:53 · 1111 阅读 · 2 评论 -
小程序结构
项目的基本组成结构pages 用来存放所有小程序的页面utils 用来存放工具性质的模块app.js 小程序项目的入口文件app.json 小程序项目的全局配置文件app.wxss 小程序项目的全局样式文件project.config.json 项目的配置文件sitemap.json 用来配置小程序机器页面是否允许被微信索引(爬虫搜索)WXML标签名称HTML 的标签为 div span img aXWML 的组件为 view text image原创 2022-03-25 21:04:02 · 522 阅读 · 0 评论 -
小程序组件
组件小程序组件是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为9大类1.视图容器2.基础内容3.表单组件4.导航组件5.媒体组件6.map地图组件7.canvas画布组件8.开放功能9.无障碍访问视图容器view普通视图区域类似于HTML中的div,是一个块级元素常用来实现页面的布局效果scroll-view可滚动的视图区域常用来实现滚动列表效果swiper和swiper-item轮播图容器组件和轮播图item组件原创 2022-03-26 09:23:21 · 705 阅读 · 0 评论 -
小程序模板语法
模板小程序中使用类似vue的模板语法data定义状态dataPage({ data: { // 字符串类型的数据 info: 'info data', // 数组类型的数据 msgList: [{msg: 'hello'},{msg: 'world'}] }})在data中的数据绑定到页面中渲染,使用Mustache语法(差值表达式)将变量包裹起来<view> {{ 要绑定的数据名称 }} </view>绑定属性<image s原创 2022-03-28 13:19:10 · 657 阅读 · 0 评论 -
小程序事件及API
API事件监听API以on开头,用来监听某些事件的触发wx.onWindowResize(function callback) 监听窗口尺寸变化的事件同步API以Sync结尾的API都是同步API同步API的执行结果,可以通过函数返回值直接获取,如果执行出错就会抛出异常wx.setStorageSync('key', 'value') 向本地存储写入内容异步API类似于jQuery中的$.ajax(options)函数,通过success、fail、complete 接收调用的结原创 2022-03-28 11:14:01 · 604 阅读 · 0 评论 -
WXSS
WXSSApp.wxss下的CSS样式为全局样式,会在所有页面上显示在样式权重相同时,局部样式的优先级要高于全局样式但在样式权重不相同时,哪个样式的权重高,它的优先级就更高全局配置小程序目录下的app.json文件是小程序的全局配置文件pages 记录当前小程序所有页面的存放路径window 全局设置小程序窗口的外观tabBar 设置小程序底部的tabBar效果style 是否启用新版的组件样式window小程序窗口的组成navigationBar 头部导航原创 2022-03-28 14:57:28 · 428 阅读 · 0 评论 -
WXS
WXSwxs 的语法类似 javascript特性数据类型类型描述number数值类型string字符串类型boolean布尔类型object对象类型function函数类型array数组类型date日期类型regexp正则ES5语法wxs不支持类似es6及以上的语法不支持let const 解构赋值 展开运算符 箭头函数 对象属性简写 …支持var 定义变量 普通函数 function 函数原创 2022-03-29 19:31:51 · 261 阅读 · 0 评论 -
app.json
全局配置小程序目录下的app.json文件是小程序的全局配置文件pages 记录当前小程序所有页面的存放路径window 全局设置小程序窗口的外观tabBar 设置小程序底部的tabBar效果style 是否启用新版的组件样式window小程序窗口的组成navigationBar 头部导航栏background 下拉刷新区域主体区域 用来显示wxml中的布局常用配置项属性名类型默认值说明navigationBarTitleTex原创 2022-03-29 13:20:23 · 1462 阅读 · 0 评论 -
小程序网络请求
网络请求因为小程序中没有ajax,所以也没有ajax请求,一般称为网络请求请求限制小程序中没有安全沙箱的限制,因此也不会有同源策略跨域限制但是小程序中网络数据请求的限制只能请求HTTPS类型的接口必须将接口的域名添加到信任列表可以勾选[开发环境不校验请求域名、TLS版本及HTTPS证书]选项,跳过request合法域名的校验,仅在开发与调试阶段使用get调用微信小程序提供的wx.request()方法,可以发起GET数据请求 wx.request({ url:原创 2022-03-29 19:13:24 · 616 阅读 · 0 评论 -
小程序路由
路由页面导航声明式导航在页面上声明一个<navigator>导航组件通过点击<navigator>组件实现页面跳转导航到tabBar页面tabBar页面指的是被配置为tabBar的页面在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性url表示要跳转的页面的地址,必须以/开头open-type表示跳转方式,必须时switchTab<navigator url="/pages/messa原创 2022-03-29 21:33:14 · 166 阅读 · 0 评论 -
小程序生命周期
生命周期小程序中生命周期分为两类应用的生命周期小程序从启动 -> 运行 ->销毁的过程页面的生命周期每个页面的加载-> 渲染-> 销毁的过程应用的生命周期函数// app.js文件App({ // 小程序初始化完成时,执行此函数,全局触发一次,可以做一些初始化操作 onLaunch: function(options){ }, // 小程序启动,或从后台进入前台显示时触发 onShow: function(options){ }, //原创 2022-03-30 09:39:02 · 365 阅读 · 0 评论 -
小程序组件
组件组件引用局部引用组件// 在页面的 .json文件 引入组件{ "usingComponents": { // 引入组件的命名 - 组件的路径 "my-test1": "/components/test1/test1" }}<!-- 在wxml中,使用组件 --><my-test1></my-test1>全局引用组件// 在 app.json文件 引入组件{ "pages": [...], "window": {...}原创 2022-03-31 09:20:20 · 1320 阅读 · 0 评论 -
小程序插槽
插槽在自定义组件的wxml结构中,可以提供一个<slot>节点插槽,用于承载组件使用者提供的wxml结构单个插槽在小程序中,默认每个自定义组件中只允许使用一个<slot>进行占位,这种个数上的限制叫做单个插槽<!-- 组件的封装 --><view> <view>这里是组件的内部节点</view> <!-- 对于不确定的内容,可以使用 <slot> 进行占位,具体的内容由组件的使用者决定 -->原创 2022-04-01 12:18:31 · 140 阅读 · 0 评论 -
小程序组件通讯
组件通讯属性绑定用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据事件绑定用于子组件向父组件传递数据,可以传递任意数据获取组件实例父组件还可以通过this.selectComponent()获取子组件实例对象,直接访问子组件的任意数据和方法属性绑定属性绑定只能传递普通类型的数据,无法将方法传递给子组件// 父组件的data节点data: { count: 0}// 父组件的wxml结构<my-test3 count="{{ count }}">&l原创 2022-04-01 12:44:49 · 108 阅读 · 0 评论 -
behaviors
behaviors每个behaviors可以包含一组属性、数据、生命周期函数和方法组件引用它时,它的数据、属性和方法会被合并到组件中每个组件可以引用多个behavior,behavior也可以引用其他behavior类似vue中的mixins创建behavior调用Behavior(Object object)方法即可创建一个共享的behavior实例对象// 调用 Behavior() 方法,创建实例对象// 并使用 module.exports 将 behavior 实例对象共享出去原创 2022-04-01 13:11:40 · 911 阅读 · 0 评论 -
Npm包下载
npm小程序中支持使用npm安装第三方包,从而提高小程序的开发效率,但也有限制不支持依赖于 Node.js 内置库的包(没有Node运行环境,http,fs等)不支持依赖于浏览器内置对象的包(没有浏览器对象,jquery等)不支持依赖于C++插件的包(加密包等等)VantVant 是一个轻量、可靠的移动端组件库,同时支持小程序安装依赖npm i @vant/weapp -S --production使用组件在app.json的usingComponents节点中引入需要的组原创 2022-04-01 14:33:21 · 1836 阅读 · 0 评论 -
Mobx
Mobx在小程序中通过Mobx实现全局数据共享可以使用 mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享mobx-miniprogram用来创建Store实例对象mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或页面中使用安装Mobx相关依赖npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1原创 2022-04-01 21:09:45 · 362 阅读 · 0 评论 -
小程序分包
分包分包构建项目后,小程序项目由一个主包和多个分包组成主包一般只包含项目的启动页面或TabBar页面,以及所有分包都需要用到的一些公共资源分包只包含和当前分包相关的页面和私有资源注:整个小程序所有分包大小不超过16M(主包+所有分包)单个分包/主包大小不能超过2M分包加载规则在小程序启动时,默认会下载主包并启动主包内页面tabBar页面需要放在主包中当用户进入分包内的某个页面时,客户端会把对应的分包下载下来,下载完成后再进行展示非tabBar页面可以按照功能的不同,划分原创 2022-04-01 21:23:49 · 1419 阅读 · 0 评论 -
自定义tabBar
tabBar自定义tabBar在app.json中的tabBar项需要指定custom字段,同时其他tabBar相关配置也会补充齐全所有tab页的json里需要声明usingComponents 项,也可以在app.json全局开启{ "tabBar": { "custom": true, "color": "#000000", "selectedColor": "#000000", "backgroundColor": "#000000", "list原创 2022-04-02 09:45:31 · 438 阅读 · 0 评论 -
uni 网络请求
网络请求由于平台的限制,小程序项目中不支持axios,而且原生的wx.request() API功能较为简单,不支持拦截器等全局定制的功能建议在uni-app项目中使用@escook/request-miniprogram第三方包发起网络数据请求在main.js中将request-miniprogram的$http挂载到全局import { $http } from '@escook/request-miniprogram'uni.$http = $http // 挂载到全局原创 2022-04-06 09:11:54 · 739 阅读 · 1 评论 -
uni 登录支付
微信登录通过getUserInfo属性进行获取<button opentype="getUserInfo" @getuserainfo="getUserInfo">登录</button>methods: { // 获取微信用户的基本信息 getUserInfo(e){ // 判断是否获取用户信息成功 // uni.$showMsg为封装好的toast方法 if(e.detail.errMsg === 'getUserInfo:fail auth deny'原创 2022-04-06 09:38:53 · 779 阅读 · 0 评论