- 博客(29)
- 收藏
- 关注
RSS订阅原创 微信小程序苹果机弹窗闪退原因
最近使用uni.app开发了一个微信小程序，出现了一些问题，在此记录一下。功能描述：底部导航栏有首页、练习、我的三个按钮，在未登录情况下可以浏览首页、另外两个页面会弹出弹窗提示是否去登录，点击是则跳转到登录页面。登录之后默认跳转到首页。在一天内首次登录情况下，要在首页弹出签到提醒、一天只弹出一次。问题描述：在苹果机上，从首页-练习-登录页进行登录，登录之后跳到了首页，可是首页的弹窗会闪退！！解决办法经过一系列问题查找发现原来是，登录跳转到首页时、苹果机会加载，先加载首页onShow周期函数、再加
2022-02-25 17:41:03
1882
原创 微信小程序使用canvas绘制分享海报
一、准备工作最近在做的一个vue项目中，需要做一个分享海报，头秃！！！首先确定海报那些地方是随机变动的、海报背景、引用二维码生成组件（目前市场上有很多生成二维码的组件，这个项目用的是uqrcode）注意小程序中分享二维码需要现在小程序后台开发设置中配好，不然链接进不去对应小程序中。 //判断昵称信息是否是中文 isChinese(size) { var re = /[^\u4E00-\u9FA5]/; let chartLength=0; f
2022-02-25 17:04:43
1783
原创 HTML元素的显示与隐藏
1、display属性display：none；隐藏对象，不再占有位置。display：block；除了转换为块级元素之外，同时还有显示元素的意思。2、visibility属性visibility:visible|hidden;元素可视或元素隐藏而visibility隐藏元素后，会继续占有原来的位置。3、 overflow属性（针对溢出部分）如果内容溢出一个元素的框（超过其指定高度宽度时）,则值备注visible不剪切内容，也不添加滚动条hidden不显
2021-02-05 11:13:02
501
原创 CSS之 Position(定位)
一、定位组成position属性指定了元素的定位类型。定位：定位模式和边偏移组成1、定位模式决定元素的定位方式，通过position属性设置，其值有：static:静态定位（不能使用边偏移）relative：相对定位absolute：绝对定位fixed：固定定位sticky：粘性定位（兼容性差，ie不支持）2、边偏移决定元素的最终位置，有：方向描述top顶端偏移量，即相对与父元素的上边框的距离bottom底部偏移量left左侧偏移量
2021-01-31 15:51:53
213
原创 CSS之浮动（float)
1、浮动传统布局有：标准流、浮动、定位。浮动可以让多个盒子在一行显示（无空隙）也可以指定空隙的大小，而行内元素或行内块元素在一行显示时会有空隙，消除这个空隙比较困难。标准流：标签按照默认的方式排列，是最基本的网页布局网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动。（1）简介语法：float:none || left || right;注意：none：默认值，不浮动；left：向左浮动，right：向右浮动；浮动要与父级搭配使用一个元素浮动，按照道理其兄弟也需要浮动
2021-01-24 16:25:43
128
原创 盒子模型（Box Model）
一、概述网页布局的本质：利用CSS摆盒子，装内容。盒子模型由：内容（content）、边框（border）、内边距（padding）、外边距（margin）构成。如图：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WkNnnNg3-1610444078995)(https://www.w3school.com.cn/css/css_boxmodel.asp#pic_center)]...
2021-01-23 16:49:24
354
原创 元素显示模式与转换
元素的显示模式即：元素以什么方式进行显示，如div标签独占一行，span标签可以在一行中显示多个。HTML元素分为块元素和行内元素。一、块元素常见的有h1~h6、p、div、ul、ol等 其中div为典型的块元素。特点：独占一行高度、宽度、外边距、内边距都可以控制宽度默认是父级宽度的100%是一个容器或者盒子，其中可以放其他行内元素或者块级元素注意：文字类标签放其他块级元素，如P标签里面不能放div标签。同理如h1~h6也是文字类标签，里面不能放其他块级元素。二、行内元素常见的.
2021-01-11 18:32:50
204
原创 CSS选择器与三大特性
1、基础选择器选择器作用缺点用法标签选择器可以选出所有相同的标签，如p，使用较多不能差异化选择p{color: blue; }类选择器可以选出一个或多个标签使用非常多可以根据需求选择.nav{ color: blue;}（nav:类名）id选择器一次只能选择一个标签，不推荐使用只能使用一次#eg{ color: blue;}（eg：id名）通配符选择器选择所有的标签，不推荐使用选择的太多，有部分不需要*{ color: blue;}2
2021-01-07 18:29:33
1008
原创 学习web前端之HTML总结1
一、HTML基础1.简介HTML（Hypertext Text Markup Language）即一种超文本标记语言，是构成web页面（Page）的基础。用HTML编写的超文本文档就是HTML文档，是由很多标记组成的一种文本文件。使用HTML描述的文件能够独立于各种操作平台，访问它只需要一个www（万维网）浏览器即可。HTML是一种标记语言而不是编程语言。2.编辑器两款常用编辑器VS Code下载网址：https://code.visualstudio.com/Sublime Text 下载网
2020-11-08 16:14:49
532
原创 配置tabBar：设置顶部或底部菜单栏（对若干一级页面的入口连接）
当顶部或者底部需要菜单栏时，我们可以通过设置tabBar快速实现。属性 类型 必填 默认值 描述 最低版本color HexColor 是 tab 上的文字默认颜色，仅支持十六进制颜色 selectedColor HexColor 是 tab 上的文字选中时的颜色，仅支持十六进制颜色 backgroundColor HexColor 是 tab 的背景色，仅支持十六进制颜色 borderStyle string 否 black tabbar 上边框的颜色， 仅支持 black / white
2020-06-08 11:07:05
1595
原创 rpx:使页面界面在不同尺寸屏幕中按比例缩放
css中原有尺寸单位在不同尺寸屏幕中不能完美实现元素按比例缩放，wxss在此基础上扩展了两种尺寸单位：rpx（responsive pixel）和rem（root em）这两种尺寸单位都是相对单位，最终会被换算为px,使用rpx和rem布局页面能让页面界面在不同尺寸屏幕中按比例缩放。1、rpxrpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物
2020-06-07 19:44:51
1212
原创 解决开发工具文件夹拖不进图片文件
今天新建了一个images图片文件夹,结果拖不进去图片文件。what？明明以前都能直接拖进去，我就更新了一下开发工具版本更到了0603版，结果不能直接拖进去图片文件，还不能复制粘贴到图片文件夹中。最后发现可以右击件需要放入图片的图片文件夹images，找到“在资源管理器中显示”或者直接按快捷键“shift+Alt+R”（相当于老版本中的硬盘打开）然后把图片文件拖进images（就是自己建的要放图片的文件夹）文件夹中就可以了。（这是我的打开的样子）...
2020-06-04 10:39:50
2022
原创 .js:页面逻辑文件
页面逻辑文件主要功能有：设置初始化数据，注册当前页面生命周期，注册事件处理函数等。小程序的逻辑文件是JavaScript文件，所有的逻辑文件，包括app.js，最终将会打包成一个js文件，在小程序启动时运行，直到小程序的销毁，类似于ServiceWorker，所以逻辑层也称为App Service。在小程序中，每个逻辑文件都有独立的作用域，并具备模块化能力。每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。1、注册页面在逻辑文件
2020-06-03 10:01:27
1296
原创 小程序框架组件之媒体组件
媒体组件主要用来显示图片、播放音频，以及直播等。image（图片）一个应用中图片是必不可少的，就像HTML提供了<img/ >标签一样，小程序提供了<image / >组件。小程序中的<inmage / >除了可以显示图片外，还提供了图片的裁剪、缩放两种模式。持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。需要注意的是：image组件默认的宽度为300px、高度225px；image组件中二维码（小图片）不支持长按识别。image组
2020-05-31 09:49:35
2371
原创 导航组件：小程序界面的跳转
页面导航页面导航组件（navigator）组件，它类似于HTML中的a标签，主要控制页面的跳转。链接内容可以是一个字、一个词或者一组词，也可以是一幅图，你可以点击这些内容跳转到新的页面。属性如下：属性名类型默认值说明最低版本targetStringself在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram2.0.7urlString当前小程序内的跳转链接，链接地址为需要跳转页面的相对地址open-typeStringna
2020-05-30 16:16:58
378
原创 win 10 如何删除需要获取管理员权限的文件和退出安全模式
首先你得在控制面板-——系统和安全-——系统下查看你的win10系统是否是家庭版。如图：因为win10家庭版找不到gpedit.msc即没有组策略编辑器。如果是家庭版，则可以进入安全模式进行删除文件。即：在设置——更新和安全——恢复——高级选项然后点击“立即重新启动”点击之后，会出现一个蓝色页面点击“疑难解答”——高级选项——启动设置——重启，在弹出页面之后按F4（即进入安全模式）在启动完成之后，电脑桌面的右上角会出现安全模式的字样。电脑处于断网状态（相当于手机的飞行模式）。此时 按“W
2020-05-28 19:35:07
2208
原创 弹性盒子布局
小程序的盒子模型采用的是CSS3规范所提出的弹性盒布局模型。弹性盒（ Flexible Box 或 flexbox）， 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。布局方式相比传统盒模型而言，可以快速实现诸如垂直居中、弹性宽度和高度等场景，以及更多排版需求，诸如：竖排元素或元素左侧对齐等。弹性盒内容弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器内包含了一个或多个弹性子元素。容器属性弹性容器支持的属性有：
2020-05-28 10:23:58
246
原创 页面样式文件WXSS:小程序版CSS
WXSS（WeiXin Stytle Sheets）是一套样式语言，用于描述WXML的组件样式。它决定WXML该怎么显示。具有CSS的大部分属性。WXSS与CSS的区别1、引入了新的尺寸单位rpx；2、与选择器相比CSS有缩减；3、有全局样式和局部样式的明确区分；4、可自动优化；尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 75
2020-05-27 10:07:31
1251
原创 wxml：模板、引用
模板wxml提供了模板（template），可以在模板中定义代码片段，然后在不同的地方调用。（1）定义模板定义模板，使用name属性，作为模板的名字。即：<template name="myTemplate"><view>内容</view></template>(2)使用模板使用模板时，使用is属性，声明需要使用的模板。然后将模板所需要的 data 传入，如：<template is="msgItem" data="{{...item
2020-05-25 14:47:26
633
原创 API简介与使用网络注意事项
API简介小程序的一些功能就有依赖框架提供的API完成，随着小程序的更新迭代，目前小程序框架API已经达到了16大类，即：基础、路由、界面、网络、数据缓存、媒体、位置、转发（前面的这几类优先重点掌握）、画布、文件、开发接口、设备、WORKER、第三方平台、WXML、广告。（微信小程序开发文档）当然这么多的API并不需要我们一个个去详细研究，而是建议我们重点掌握常用的API如何查阅和使用，然后即可触类旁通去使用其他的API，就像查字典，我们知道如何去查阅就可以了。小程序API在定义和使用上的一些通则。
2020-05-25 10:06:42
890
原创 wxml：条件渲染与列表渲染
上一篇我介绍了wxml的数据绑定，这次介绍它的条件渲染。条件渲染条件渲染相当于在小程序页面的输出条件语句。(1)wx:if除了数据绑定，我们常常会使用逻辑分支，这时候可以使用wx:if="{{condition}}"来判断是否需要渲染该代码块<view wx:if="{{showContent}}">内容</view>//page.jsPage({data:{showContent:true}}});当showContent的值为true是，view会被渲染
2020-05-23 11:20:00
964
原创 微信小程序之第一个简单小程序
我是先创建了项目，填写了AppID。1、创建项目目录文件pages，再在该目录下创建目录文件2、创建如图：3、打开app.json写入代码：{ "pages": [ "pages/about/about" ]}注意：虽然我们about.json里面不打代码，但是要输入“{ }”，不然文件会报错。4、打开about.wxml写入代码：<view bindtap="countClick">我是index页面，你点击了{{count}}次</view>
2020-05-23 09:22:02
192
原创 关于微信开发工具界面不一样
在初学时，我找好了网课，跟着官网上的操作下载了最新的开发工具，打开之后发现怎么与网课上的开发工具界面不同，这是怎么回事？这只是因为开发工具的版本不一样，打开自己下载的开发工具，在界面的左上角就是开发工具的版本，搞不懂新版的，可以看网课视频上已打开开发工具的版本，再下载与它一样的版本，就可以啦。...
2020-05-21 19:46:36
679
原创 微信小程序开发之WXML：数据绑定
WXML语言最终会被转译为宿主端对应的语言，所以WXML语言中使用的标签一定是小程序定义的标签，不能使用自定义的标签，这样才能保持页面的正确转译。（这是对上一篇标签的补充）WXML具有数据绑定、列表渲染、条件渲染、模板、事件等能力。数据绑定数据绑定功能使得程序在运行过程中，具备动态改变渲染界面的能力，从而达到更好的用户体验效果。小程序的数据绑定使用Mustache语法（双大括号）将变量或简单的的运算规则包起来。简单绑定WXML中的动态数据均来自对应Page的data。简单数据绑定是指我们使用Mus
2020-05-21 11:05:17
1651
原创 微信小程序之WXML:标签与属性
WXML（WeiXin Markup Language）（页面结构文件）是框架设计的一套标签（标记）语言。用于渲染界面，它结合基础组件和时件系统，可以构建出页面结构。标签与属性语法规则：1、所有元素都必须闭合标签且小写：<text（小写）> Hello World </text>2、所有元素都必须正确嵌套：<view>（开始标签1）<text>（开始标签2）Hello </text>（结束标签2)</view>（结束标签1
2020-05-20 18:43:51
3196
原创 微信小程序之生命周期和线程
生命周期与线程小程序的生命周期分为应用生命周期和页面生命周期。小程序应用生命周期onLaunch:启动时初始化onShow:从后台唤醒，切换到前台；onHide：切换到后台；onError:脚本错误或者API调用失败；globalData：应用全局数据。小程序页面生命周期1、onLad：页面初次加载，Page构造器参数定义的onLoad方法被调用，页面未销毁之前只调用一次。2、onShow：a、onLoad回调参数 ； b、从其他页面回到当前页面3、onReady：onShow方
2020-05-20 10:14:07
261
转载 开发微信小程序之配置
小程序有两种重要的配置文件：全局配置和页面配置。配置app.json小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。如下图：page.json每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。...
2020-05-19 10:38:55
1286
原创 微信小程序开发之开发框架1
框架原理1、理解小程序框架原理目录结构文件构成1、理解小程序的开发和之前常见的H5WEB开发有很大的相似性，因此，熟悉H5WEB开发的开发者对小程序开发应该更容易上手，微信小程序框架是基于MVVM模式打造的，微信团队为小程序提供的框架命名为“MINA应用框架”。小程序框架原理微信小程序MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供一整套JavaScript API，让开发者能够非常方便的使用微信客户端提供的各种基础功能与能力，快速地构建一个应用。整个
2020-05-19 09:58:57
1343
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人