![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
文章平均质量分 66
web 沐
这个作者很懒,什么都没留下…
展开
-
微信小程序上传到阿里云OSS的代码
这里写自定义目录标题微信小程序上传到阿里云OSS的代码第一步第二步第三步文档本篇文章转载他人博客(简书)微信小程序上传到阿里云OSS的代码第一步在根目录创建config.js文件夹var fileHost="xxxx.aliyuncs.com(你的阿里云oss地址)"var config = { //aliyun OSS config uploadImageUrl: `${fileHost}`, //默认存在根目录,可根据需求改 AccessKeySecret: '填你自己的Acces转载 2021-12-12 14:28:17 · 358 阅读 · 0 评论 -
40.微信小程序(API--基础、路由、缓存、媒体)
微信小程序(API–基础、路由、缓存、媒体)大纲(1)基础 API(2)路由API(3)数据缓存API(4)媒体API(1)基础API—系统获取系统信息wx.getSystemInfo(Object object)与wx.getSystemInfoSync(Object object)wx.getSystemInfoSync为同步API,即wx.getSystemInfo的同步版success参数:异步获取系统信息wx.getSystemInfo(Object object)同原创 2020-08-06 18:01:55 · 529 阅读 · 0 评论 -
39.微信小程序(API--简介、运行机制及同步异步)
微信小程序(API–简介、运行机制及同步异步)API简介(1)API是什么?引用百度百科介绍(2)微信小程序API是什么?API(Application Programming Interface,应用程序编程接口),通俗来讲:API是一种接口函数,把函数封装起来,给开发者,这样好多的功能就不需要你去实现了,只要会调用就好了。微信小程序利用API就可以实现用户信息、数据存储、微信支付等功能。(3)小程序API结构(4)API运行机制API接口大多数是由后端编写,前端开发人员进行请求调用。原创 2020-08-06 17:51:29 · 758 阅读 · 0 评论 -
38.微信小程序(组件--自定义组件)
微信小程序(组件–自定义组件)前言缘由:小程序的界面是由一系列组件构成的。小程序基础库提供了一组基础组件来满足开发者的基本需求。但随着小程序开发变得越来越复杂,单纯使用基础组件来进行开发也变得越来越不方便。例如,较为复杂的小程序中常常会有一些通用的交互模块,比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到,逻辑也相对独立。然而,用传统的小程序开发方法来实现这样的模块是非常繁琐的。自定义组件:面对这个情况,小程序基础库提供了让开发者自己创建界面组件的特性,原创 2020-08-06 17:46:51 · 271 阅读 · 0 评论 -
37.微信小程序(组件--地图+画布)
微信小程序(组件–地图+画布)本节主要介绍下地图组件map及画布组件canvas。因为组件属性过多,很多方法尚未完善,所以主要讲解下常用属性及方法,后期开发如遇个性化地图项目需求,可参考官方文档依次配置即可地图组件map地图组件<map></map>个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通,详见https://lbs.qq.com/product/miniapp/guide《小程序个性地图使用指南》。根据指南介绍进行注册操作组件属性的长度单原创 2020-08-06 17:43:16 · 659 阅读 · 0 评论 -
36.微信小程序(组件--媒体)
微信小程序(组件–媒体)大纲常用媒体组件①audio音频组件②camera系统相机组件③image图片组件④video视频组件媒体组件-音频音频控件注意:1.6.0版本开始,该组件不再维护,建议使用能力更强的 wx.createInnerAudioContext 接口,之后课程再做介绍。案例:案例渲染结果:mp3音乐外链:http://www.333ttt.com/upaudio音频属性列表—基础属性audio音频属性列表—事件绑定属性audio音频操控,接下来添加播放与原创 2020-08-06 17:38:47 · 879 阅读 · 0 评论 -
35.微信小程序(组件--表单:滑块、开关、选择器)
微信小程序(组件–表单:滑块、开关、选择器)(1)表单组件—slider滑动组件颜色类属性滑块属性拖动事件(2)表单组件—switch开关组件注意:switch类型切换时在iOS自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭信息认证(3)表单组件—picker滚动选择器mode取值注意:除了之前的通用属性外,对于不同的mode,picker拥有不同的属性普通选择器mode = selector接下来将range改原创 2020-08-05 17:24:54 · 1333 阅读 · 0 评论 -
34.微信小程序(组件--表单:交互控件)
微信小程序(组件–表单:交互控件)前言(1)input输入框组件(2)textarea多行输入框组件(3)form表单组件(4)radio-group单选选择器与radio单选项目(5)label关联组件(6)checkbox-group多选选择器与checkbox多选项目表单组件(1)input输入框组件基础属性基础属性—type类型type属性值占位符placeholder相关占位符placeholder属性注意:placeholder字体大小默认与inpu原创 2020-08-05 16:36:51 · 375 阅读 · 0 评论 -
32.微信小程序(组件--表单:按钮)
微信小程序(组件–表单:按钮)(1)button按钮组件button按钮属性按钮大小size属性值查看源码,分析button默认样式与小尺寸button由此可以分析出button按钮的边框是由伪元素button:after设置的。所以,若想去除小程序按钮默认边框,给button设置border:none无效,只能通过伪元素去除默认边框。查看源码,小尺寸button按钮样式属性按钮type样式类型按钮plain是否镂空按钮是否禁用按钮是否显示loading图标原创 2020-07-29 11:11:09 · 581 阅读 · 0 评论 -
33.微信小程序(组件--表单:按钮微信开放能力与客服)
微信小程序(组件–表单:按钮微信开放能力与客服)前言本节主要讲解下按钮组件之open-type —微信开放能力常用属性值①contact客户会话②share分享转发③getPhoneNumber获取用户手机号④getUserInfo获取用户信息⑤openSetting授权设置页⑥feedback意见反馈页面表单组件按钮组件之open-type —微信开放能力常用属性值按钮组件之open-type 微信开放能力属性值----contact客服会话注意:①开发者工具暂不支持打开原创 2020-07-28 16:14:19 · 289 阅读 · 0 评论 -
31.微信小程序(组件 -- 基础内容组件)
微信小程序(组件 – 基础内容组件)前言(1)icon图标组件(2)progress进度条组件(3)text文本组件(4)拓展:富文本编辑器UE和UM(5)rich-text 富文本组件基础内容组件(1)icon图标组件组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)type类型参数(2)progress进度条组件组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)基础展示属性颜色属性动画属性(3)text文本组件基础属性原创 2020-07-28 15:36:43 · 1725 阅读 · 0 评论 -
30.微信小程序(组件 -- 视图组件案例)
微信小程序(组件 – 视图组件案例)前言:(1)滑块视图容器swiper和滑块swiper-item组件(2)小程序scroll-view实现横向滚动导航(3)scroll-view满屏滚动(4)滚动Tab选项卡视图容器组件(1)滑块视图容器swiper和滑块swiper-item组件微信小程序swiper实现滑动放大缩小效果①先将基础轮播图写出来,开启无缝衔接模式circular②开启指示点:属性③自定义指示点样式④添加前后边距:属性⑤设置中间激活块的类名原创 2020-07-28 11:41:02 · 558 阅读 · 0 评论 -
29.微信小程序(组件--基础内容组件)
微信小程序(组件–基础内容组件)前言(1)icon图标组件(2)progress进度条组件(3)text文本组件(4)拓展:富文本编辑器UE和UM(5)rich-text 富文本组件基础内容组件(1)icon图标组件组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)(1)icon图标组件type类型参数(1)icon图标组件(2)progress...原创 2019-12-09 09:33:47 · 207 阅读 · 0 评论 -
28.微信小程序(组件--视图组件案例)
微信小程序(组件–视图组件案例)大纲(1)滑块视图容器swiper和滑块swiper-item组件(2)小程序scroll-view实现横向滚动导航(3)scroll-view满屏滚动(4)滚动Tab选项卡视图容器组件(1)滑块视图容器swiper和滑块swiper-item组件微信小程序swiper实现滑动放大缩小效果①先将基础轮播图写出来,开启无缝衔接模式circular...原创 2019-12-09 09:27:29 · 280 阅读 · 0 评论 -
27.微信小程序(组件--视图组件)
29.微信小程序(组件–视图组件)前言什么是组件?组件就是我们写HTML的一些基本标签,比如div、span、p、ul、li等。在大多数HTML里面的标签,很多都是要自己写上一些效果的,但是在小程序里面,很多标签都带有自己的效果,可以实现一些简单的JS逻辑。微信小程序里有很多很有意思的组件,这些组件给我们开发小程序提供了很大的便利简介一个小程序页面可以分解成多个部分组成,组件就是小程序...原创 2019-12-09 09:09:13 · 336 阅读 · 0 评论 -
26.微信小程序(WeUI框架)
微信小程序(WeUI框架)前言前言:因为小程序的api描述都比较简单,并没有wxml及wxss的描述,有的人可能会想小程序有没有一个UI库。类似于前端中的常见的UI库例如Bootstrap、MDUI(简称MD)、Semantic UI(简称Semantic )、uni-app、MUI、Element等等类似的框架UI库小程序UI库WeUI:结果当前是当前有的,它就是微信小程序官方推出的小...原创 2019-11-30 09:18:27 · 3008 阅读 · 0 评论 -
25.微信小程序(组件--收藏案例)
微信小程序(组件–收藏案例)前言本节主要介绍下常见的收藏功能的实现需求分析样式分析:未收藏时为灰色态,点击收藏按钮,图标变色,同时弹框实体收藏成功;收藏成功后,点击已收藏的商品,取消收藏,此时图标恢复为灰色态,同时弹框提示取消收藏成功。逻辑分析:每个商品单独绑定个数据,负责管理收藏状态,点击时判断状态,然后切换收藏功能(1)先将图片静态样式写入(1)先将图片静态样式写入...原创 2019-11-30 09:15:06 · 692 阅读 · 1 评论 -
24.微信小程序(事件对象-绑定、冒泡、捕获)
微信小程序(事件对象-绑定、冒泡、捕获)组件原生组件小程序中的部分组件是由客户端创建的原生组件,包含:①camera②canvas③input(仅在focus时表现为原生组件)④map⑤textarea⑥video事件冒泡事件触发验证事件冒泡验证点击子级蓝色区域验证后发现事件发生冒泡,点击子级时,除了触发子级事件,还会冒泡到父级,触发父级绑定的事件事件冒泡验证点...原创 2019-11-30 09:12:26 · 223 阅读 · 0 评论 -
23.微信小程序(触控事件)
微信小程序(触控事件)事件简介事件简介①本质:事件是视图层到逻辑层的通讯方式②作用:事件可以将用户的行为反馈到逻辑层进行处理③应用:事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数④参数:事件对象可以携带额外信息,如 id, dataset, touches事件类型在编写代码中,使用频率高的事件方式是常见的事件类型注意:touch触屏系列事件常结合画...原创 2019-11-29 09:43:51 · 261 阅读 · 0 评论 -
22.微信小程序(路由及组件跳页传参)
24.微信小程序(路由及组件跳页传参)大纲(1)API路由跳页传参(2)navigator导航组件跳页传参API路由跳页传参商品列表展示页商品展示页编写回到商城列表展示页,如果跳页时直接传参,会发现黄色警告,无法跳页小程序事件传递参数小程序事件传递参数在小程序中,给元素绑定事件不能直接传递参数,如果写成正解:①给元素绑定自定义属性data-item=”{{i...原创 2019-11-29 09:38:07 · 125 阅读 · 0 评论 -
21.微信小程序(组件跳转、规范、层级准备)
微信小程序(组件跳转、规范、层级准备)大纲(1)路由API跳转小结(2)hover样式(3)navigator导航组件跳转(4)路由跳转规范(5)页面层级准备前言首先简单回顾下路由API跳转:wx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunch除了使用路由API进行页面跳转外,小程序宿主环境也...原创 2019-11-29 09:35:17 · 194 阅读 · 0 评论 -
20.微信小程序(页面栈和API跳转)
微信小程序(页面栈和API跳转)大纲(1)数据操作限制补充(2)页面栈(3)API页面跳转c—router路由APIwx.navigateTowx.navigateBackwx.redirectTowx.switchTabwx.reLaunch数据操作限制针对上节所讲的程序注册器与页面注册器,简单做下补充,即页面数据data的操作限制(1)直接修改Page实例的this.d...原创 2019-11-29 09:29:45 · 674 阅读 · 0 评论 -
19.微信小程序(页面用户行为)
微信小程序(页面用户行为)大纲(1)页面构造/注册器Page()(2)页面注册器参数 data初始化数据 ...原创 2019-11-27 14:41:02 · 261 阅读 · 0 评论 -
18.微信小程序(页面生命周期)
微信小程序(页面生命周期)大纲(1)页面构造/注册器Page()(2)页面注册器参数 data初始化数据 ...原创 2019-11-27 14:34:27 · 272 阅读 · 0 评论 -
17.微信小程序(小程序生命周期、运行机制、场景值)
微信小程序(小程序生命周期、运行机制、场景值)大纲(1)程序构造/注册器App()(2)小程序生命周期(3)小程序运行机制(4)scene场景值体验版特定页面设置体验人员扫描二维码进入时有时进入的不是首页???方案:登录小程序后台,重新设置体验版打开时的特定页面路径,更换为当前首页即可程序构造/注册器App()注册器/构造器分类:小程序级别:App-----程序构造器/...原创 2019-11-27 14:29:08 · 152 阅读 · 0 评论 -
16.微信小程序(逻辑层与程序注册构造器)
微信小程序(逻辑层与程序注册构造器)大纲(1)小程序逻辑层 App Service(APP服务)(2)ServiceWorker(3)web worker(4)程序构造/注册器App()前言逻辑层 App Service(APP服务)小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据...原创 2019-11-27 14:24:38 · 177 阅读 · 0 评论 -
15.微信小程序(跳页之tabBar导航跳转)
微信小程序(跳页之tabBar导航跳转)tabBar小程序导航简介:小程序是一个多tab标签应用(客户端窗口的底部或顶部有tab栏可以切换页面),可以通过Tabbar配置项指定tab栏的表现,以及tab切换时显示的对应页面。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置在小程序配置文件里面可以设置tabBar属性:先来个简单案例看下效果接下来挨个看下tab...原创 2019-11-25 10:42:58 · 309 阅读 · 0 评论 -
14.微信小程序(小程序模型与宿主环境)
微信小程序(小程序模型与宿主环境)大纲(1)小程序模型(2)模型基本工作方式(3)数据驱动(4)通信模式(5)WebView(6)JsCore(7)宿主环境前言小程序可以调用宿主环境/微信提供的微信客户端的能力,这就使得小程序比普通网页拥有更多的能力(扫一扫、摇一摇)。小程序的运行环境分成渲染层和逻辑层, WXML 模板文件和 WXSS 样式文件工作在渲染层,JS 逻辑文件工...原创 2019-11-25 10:39:08 · 372 阅读 · 2 评论 -
13.微信小程序(JS逻辑文件)
15.微信小程序(JS逻辑文件)大纲(1)业务逻辑案例(2)调用API案例(3)ECMAScript----(4)小程序执行环境(5)模块化(6)作用域与全局变量前言前言:一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,通过编写 脚本文件来处理用户的操作。小程序的主要开发语言是 JavaScriptJS 作用:①开发...原创 2019-11-22 14:39:46 · 365 阅读 · 0 评论 -
12.静态补充CSS之IFC、FFC、GFC讲解
静态补充CSS之IFC、FFC、GFC讲解简介前言:Web页面的布局,常见的主要有“浮动布局(float)”、“定位布局(position)”、“行内块布局(inline-block)”、“CSS3的多栏布局(Columns)”、“伸缩布局(Flexbox)”以及“网格布局(Grids)”等。IFC简介IFC简介:行级格式化上下文Inline Formatting ContextIFC...原创 2019-11-22 14:30:32 · 224 阅读 · 0 评论 -
11.静态补充CSS-BFC讲解
静态补充CSS-BFC讲解BFC简介BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)首先要明确BFC是什么意思,其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”。在解释 BFC 是什么之前,需要先介绍 Box、Formatting Conte...原创 2019-11-22 14:28:23 · 157 阅读 · 0 评论 -
10.微信小程序(Flex布局-项目属性)
微信小程序(Flex布局-项目属性)大纲(1)项目属性集合(2)order、flex-grow、flex-shrink、flex-basis、flex、align-self项目属性项目属性:设置容器内项目相关样式,用于设置项目的尺寸、位置,以及对项目的对齐方式做特殊设置。项目元素属性集合:order、flex-grow、flex-shrink、flex-basis、flex、ali...原创 2019-11-22 14:24:33 · 293 阅读 · 0 评论 -
9.微信小程序(Flex布局-容器属性)
微信小程序(Flex布局-容器属性)大纲(1)场景(2)容器与项目元素(3)主轴与交叉轴(4)容器属性盒模型分类盒模型分类:IE盒模型,标准盒模型,本质区别:宽高计算方式场景场景:在小程序开发中,需要考虑各种尺寸终端设备上的适配。在传统网页开发,用的是盒模型,通过display:inline | block | inline-block、 position、float来实现...原创 2019-11-22 14:20:46 · 427 阅读 · 0 评论 -
8.微信小程序(适配小结、移动端1px与选择器权重)
微信小程序(适配小结、移动端1px与选择器权重)WXSS选择器权重与优先级WXSS优先级与CSS类似,权重如下图所示权重越高越优先。在优先级相同的情况下,后设置的样式优先级高于先设置的样式权重案例:适配小结针对上节介绍的物理像素与逻辑像素相关概念,本节再来做个小结,简单做下回顾关键词:物理像素dp(1)物理像素(physical pixel)物理像素又被称为设备像素(de...原创 2019-11-21 15:05:53 · 185 阅读 · 0 评论 -
7.微信小程序(布局适配与物理逻辑像素)
微信小程序(布局适配与物理逻辑像素)前言移动端开发经常遇到一些概念:物理像素、逻辑像素、像素密度、像素比等,本节来详细介绍下关键词:屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等。屏幕尺寸华为荣耀7屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米比如常见的屏幕尺寸有2.4、2....原创 2019-11-21 14:57:33 · 351 阅读 · 0 评论 -
6.微信小程序(WXSS样式文件)+微信小程序(WXSS选择器)
微信小程序(WXSS样式文件)+微信小程序(WXSS选择器)微信小程序(WXSS样式文件):大纲(1)WXSS简介(2)分类(3)尺寸单位rpx(4)样式导入@import(5)style内联样式(6)WXSS选择器(7)开发工具设置WXSS简介简介:WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。...原创 2019-11-21 14:48:42 · 2207 阅读 · 0 评论 -
5.微信小程序(WXML模板文件二)
微信小程序(WXML模板文件二)大纲(1)循环指令key属性补充(2)wx:if条件变异指令(3)标签(4)hidden隐藏元素(5)模板(6)引用(7)共同属性循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用index(1)key值在没有删除插入操作时只要是唯一值也无所谓,即此时为index索引也可以(2)如果有删除或者插入的操作,后一位会继承删...原创 2019-11-21 14:37:24 · 163 阅读 · 0 评论 -
4.微信小程序(WXML模板文件一)
微信小程序(WXML模板文件一)(1)页面根元素(2)WXML简介(3)标签闭合、敏感性(4)数据驱动(5)数据绑定{{}}—{{}}(6)列表渲染v-for----wx:for页面根元素根元素page每一个页面都具备一个根元素:页面根元素可以在控制台的WXML选项卡中看到允许在wxss文件中对page根元素进行样式设置简介全称:WXML 全称是 WeiXin Mar...原创 2019-11-13 11:31:25 · 1225 阅读 · 0 评论 -
3.微信小程序(JSON配置文件)
微信小程序(JSON配置文件)新建页面新建页面page(1)手动创建①右键单击 [pages] 文件夹,在弹出的菜单中选择“新建目录”②右键单击新建的目录,在弹出的菜单中选择“新建Page”(2)自动创建直接在app.json文件的pages选项中将新页面的路径写好,系统会自动创建所对应的四个文件page.wxml模板文件、page.wxss样式文件、page.json配置文件、pa...原创 2019-11-13 11:07:32 · 1501 阅读 · 0 评论 -
2.微信小程序(发布审核、人员及目录结构分析)
微信小程序(发布审核、人员及目录结构分析)(1)上传代码(2)提交审核(3)发布(4)代码包优化(5)小程序目录结构分析上传代码同预览和真机调试不同,上传代码是用于提交体验或者审核使用的。点击开发者工具顶部操作栏的上传按钮,填写版本号以及项目备注,需要注意的是,这里版本号以及项目备注是为了方便管理员检查版本使用的,开发者可以根据自己的实际要求来填写这两个字段。上传成功之后,登录小...原创 2019-11-12 18:50:23 · 337 阅读 · 0 评论