小程序学习笔记
曾胖神父
这个作者很懒,什么都没留下…
展开
-
[小程序开发]获取当前时间————(2020.3.19学习笔记)
小程序中,想要获取当前时间很简单,可直接通过Date类对象获取,为了方便理解,我们这里直接使用console将Date对象输出到控制台,结果如下图从这里就能看出,系统时间已经被Date类对象获取,剩下的就是从Date类对象中将获取的系统时间的年月日秒分离出来,关于这点,Date类有对应的方法,比如getFullYear(),getMonth(),getDate(),getHours(),get...原创 2020-03-19 11:20:56 · 683 阅读 · 0 评论 -
[小程序开发]使用 wx.getSystemInfo实现自适应————(2020.3.15学习笔记)
在开始之前,先介绍一下wx.getSystemInfo(Object object),通过该API可以获取当前设备的高度,宽度(官方文档链接https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html)。然后在知道可以通过wx.getSystemInfo(Obj...原创 2020-03-15 10:14:28 · 3808 阅读 · 0 评论 -
[小程序开发]小程序自定义tabbar————(2020.2.28学习笔记)
因为小微信默认的tabbar有很多限制(如tabbar图标大小不能自定义),所以有时候为了满足一些特殊的项目需求就就需要使用自定义tabbar,在使用自定义tabbar之前,必需让默认tabbar不显示,这里就要用到默认tabbar的custom属性,将custom设为true,默认tabbar就会不显示(如下图)这里注意一下,是让默认tabbar不显示,不是直接去除默认tabbar,而且想跳...原创 2020-02-28 13:14:45 · 532 阅读 · 1 评论 -
[小程序开发]小程序上线时遇到的坑————(2020.2.20学习笔记)
前段时间上线了自己一个小程序项目,结果发现上线时出了不少问题,再加上审核一般都是一到七天,所以折腾了不少时间,为了以后避免遇到这种问题,就把这次上线遇到的坑总结一下首先,遇到的问题就是上线的小程序是会检查域名的,也就是说如果你在wx.request里访问的域名没HTTPS证书或者域名没在微信公众平台进行配置的话(如下图),都会出现访问错误这里坑点就来了,虽然上线的小程序检验不过关就无法访问,...原创 2020-02-20 12:09:53 · 290 阅读 · 0 评论 -
[微信小程序]使用input组件实现简单的输入框功能—————(2020.2.16学习笔记)
在之前的文章中,我们谈过用导入的方式实现搜索框(诺,这是这篇https://blog.csdn.net/qq_37704442/article/details/103500904),那篇文章实现搜索框的原理,就是使用了input组件,当然,今天要实现的输入框,虽然比搜索框要简单,但同样也是用input组件实现的,所以,介于input组件如此重要,我们有必要在开始之前认识一下input组件inpu...原创 2020-02-16 23:16:35 · 4534 阅读 · 1 评论 -
小程序自定义无键弹窗组件————(2020.2.8学习笔记)
这次要实现的是无退出按钮无确定按钮的弹窗(如下图)由于小程序自带的modal组件,和弹窗api都是默认有退出和确定按钮的,而且还是不能去掉的那种(惊了),所以又又又得自己动手定义一个弹窗组件才能实现效果了,只不过,在自定义弹窗组件之前,先要弄清楚,弹窗是什么?或者说,什么样的组件才能被称之为弹窗,根据我们之前,玩过,用过其他应用的经验,不难看出,大部分弹窗效果,都是用户在点击按钮,或者进入到某...原创 2020-02-08 20:06:52 · 189 阅读 · 0 评论 -
做一个天气小程序(界面)————(2020.2.4学习笔记)
首先放出成果图,代码和图片素材成果图图片素材链接 https://pan.baidu.com/s/11Xt38DkO5thlojWm7UFCFA提取码:t4ov代码(包含了需要用到的自定义组件的代码)链接 https://pan.baidu.com/s/1GgOOKj-XHSNunUt24Td-jA提取码:hllr-----------------------------------...原创 2020-02-04 22:59:27 · 1132 阅读 · 0 评论 -
小程序自定义标题栏————(2020.1.31学习笔记)
这次要实现的标题栏效果如下图如图标题栏文字局左,而小程序默认标题栏文字是居中的,所以要实现这个效果必须使用自定义标题栏,那么,在使用自定义标题栏之前,我们必须在app.json进行配置,将原有的默认标题栏停用,转为使用自定义标题栏(配置代码如下) "window": { "navigationStyle":"custom", },在停用默认标题栏之后,原先...原创 2020-01-31 21:42:19 · 650 阅读 · 0 评论 -
小程序层级————(2020.1.27学习笔记)
有时候在开发中,我们会希望一个组件显示在另一个组件的上面(效果如下图)而要实现这种效果,必须在wxss中设置组件的z-index,也就是设置组件的层级,拿效果图做例子,效果图中,定位图标在灰色背景图上,要实现这个效果,必须设置灰色背景图z-index为-1,然后设置定位图标z-index为1,因为z-index比背景图大,所以图标会显示在背景图之上,(代码如下)wxml的代码<vie...原创 2020-01-27 23:03:18 · 495 阅读 · 0 评论 -
小程序实现圆角图效果————(2020.1.23学习笔记)
这次实现的效果如下图实现此效果很简单,在Image组件的样式中加入 border-radius: 5px;就行了原创 2020-01-23 21:02:35 · 752 阅读 · 0 评论 -
小程序实现启动页自动跳转————(2020.1.19学习笔记)
今天要是实现的是启动页自动跳转效果(如下图)启动页在打开小程序2000毫秒之后,自动跳转到有tabbar的首页。在实现该效果之前,首先要构建自己的启动页,这里我的启动页如下图启动页的wxml代码如下<view class="WelCome_Header"> <image src="/My_Image/AppIcon_Image/View_Sky_100.png"&...原创 2020-01-19 22:44:50 · 1921 阅读 · 2 评论 -
小程序获取用户所在城市————(2020.1.15学习笔记)
首先要弄清楚的是,微信小程序是没有城市定位api的,只有经纬度定位api,但出于弥补,可以在小程序开发工具设置中开通腾讯位置服务(如下图)开通之后,就可以将小程序定位用户的经纬度传给腾讯位置服务的接口,然后腾讯的定位服务将会返回用户所在城市,所以,先要实现小程序定位用户经纬度功能,在实现这个功能之前,由于需要获取用户位置权限,则必须申请权限(申请权限代码如下) "permission": {...原创 2020-01-15 16:47:35 · 1079 阅读 · 1 评论 -
小程序实现实现tab-control停留效果—————(2020.1.11学习笔记)
这次实现的tab-control停留效果如下图要实现停留效果,必须先自定义一个tab-control组件,这里实现tab-control的详细流程请看这个我2019.12.23的学习笔记(https://blog.csdn.net/qq_37704442/article/details/103674433),然后在要实现效果的页面对应的wxml文件上,引用两个自定义tab-control组件...原创 2020-01-12 00:06:21 · 219 阅读 · 0 评论 -
小程序实现一键返回顶部功能————(2020.1.7学习笔记)
这次要实现的功能是一键返回顶部功能,看上去的效果就是,用户在游览商品的时候 ,下划到一定深度就会在右下角显示出一个按钮(如下图的按钮)点击按钮之后就可以返回到当前页面顶部。那么要实现这个效果,首先第一步就是声明一个名为My_BackTop的自定义组件(如下图)这个组件现在还没有一个按钮该有的样子,所以必须把组件的UI先构筑好,让其先看上去像按钮,这样就必须在该组件的wxml文件引用上文中...原创 2020-01-07 21:54:41 · 971 阅读 · 1 评论 -
小程序实现自动轮播图效果————(2020.1.3学习笔记)
微信小程序自带轮播图的组件,所以直接调用(代码如下)<swiper class="swiper" circular="true" autoplay="true" interval="3000" duration="300" indicator-dots="true" indicator-active-color="#ff577"><bloc...原创 2020-01-03 18:36:41 · 646 阅读 · 0 评论 -
小程序实现三种不同的弹窗效果————(2019.12.31学习笔记)
先在对应页面的wxml文件上声明好按钮<button size="mini" bindtap="handleToast_1">弹窗样式1</button><button size="mini" bindtap="handleToast_2">弹窗样式2</button><button size="mini" bindtap="handle...原创 2019-12-31 22:13:45 · 423 阅读 · 0 评论 -
小程序实现导航栏效果————(2019.12.23学习笔记)
首先新建一个自定义组件,组件名随意,这里我设置的组件名为My-tab,新建完组件之后,第一件事就是声明好导航栏可能需要用到的样式(代码如下)/* Accessories/My_tab/My_tab.wxss */.tab-contrl{ display: flex;/*弹性布局*/ height: 88rpx; line-height: 88rpx;}.tab-item{ ...原创 2019-12-23 23:47:24 · 507 阅读 · 0 评论 -
小程序自定义组件(可接收页面数据与样式)————(2019.12.19学习笔记)
首先在目录中右击新建Component,这样小程序编译器就会在目标目录中生成小程序自定义组件的json,wxml,wxss,js四个文件,当然也可以选择直接在某个普通页面的json文件增加一行自定义组件声明(声明代码如下)"component": true声明完自定义组件之后,可在组件的wxml,wxss文件上设计组件和组件样式,这里我们先设计组件样式,在wxss中设置一个可让字体大小为50...原创 2019-12-19 23:35:04 · 404 阅读 · 0 评论 -
小程序导入weui实现搜索栏效果————(2019.12.11学习笔记)
首先下载weui项目,项目地址为https://github.com/Tencent/weui-wxss,然后下载解压之后,先找到weui项目dist\style下名为weui的wxss文件(如下图)并将weui文件导入到自己项目的目录中(此示例中导入的目录为根目录,如下图)因为weui文件包含了所有UI效果的逻辑代码,所以导入到项目目录就可以被全局文件app.wxss引用,引用之后就可以...原创 2019-12-11 23:10:29 · 932 阅读 · 0 评论 -
小程序实现底部栏效果————(2019.12.7学习笔记)
因为底部栏要在各个页面出现,属于全局效果,所以代码必需在全局文件app.json上,而且不同与Android中,关于底部栏的实现,微信内置了接口,所以只需要调用就可以实现(代码如下)"tabBar": { "list": [ { "pagePath": "Pages/First",//对应页面路径 "text": "首页",//底部栏文字 ...原创 2019-12-07 22:09:18 · 207 阅读 · 0 评论 -
小程序实现从本地获取图片功能————(2019.12.4学习笔记)
先在对应页面新建一个按钮(button)组件<button bindtap="SelectImage">点击获取图片</button>这样用户就有一个能进行互动的按钮了,当然还要补充一下点击事件才能实现效果,这里点击事件对应的是一个名为SelectImage的函数,所以在对应页面的JS文件上新建SelectImage函数,代码如下 wx.chooseImage({...原创 2019-12-04 23:19:51 · 1877 阅读 · 0 评论 -
实现小程序在页面加载时获取api接口数据————(2019.12.1 学习笔记)
在小程序页面的生命周期函数中,onload(Object query)主要负责页面加载时的触发,所以为了能实现在页面加载时获取到api接口数据,则必须在需求的页面生命周期函数onload(Object query)中完成对获取数据的操作(实现的代码如下图,当然,代码应在对应页面的JS文件中)console.log("已显示");//当页面加载时会打印,非必需 wx:wx.request...原创 2019-12-01 23:35:38 · 1069 阅读 · 0 评论 -
小程序访问api接口出现不在request合法域名列表中错误的解决办法————(2019.11.27学习笔记)
使用小程序request接口去访问聚合数据平台api的时候出现了错误,错误如下图后面去百度了一下,个个都说是要去微信公众平台里去配置,结果配置的时候出现说我域名不合法(错误如下图)俺寻思,api接口也不是服务器域名啊,然后在微信开发者工具设置里面折腾了一下,发现了在设置->项目设置里有一个不检验合法域名的设置,把他点亮(如下图)然后刷新了一下,问题就解决了...原创 2019-11-27 21:19:02 · 968 阅读 · 0 评论 -
微信小程序获取用户信息,实现用户授权功能————(2019.11.23学习笔记)
今天学习小程序的时候,发现教程中获取用户信息的wx.getUserInfo()接口早就过期不能用,所以稍微思索了一下,整出了一个可行的办法获取用户信息,首先在任意页面的wxml文件上初始化一个按钮控件<button size="mini" open-type="getUserInfo" bindgetuserinfo="GetUser">授权按钮</button>然后...原创 2019-11-23 23:18:31 · 481 阅读 · 0 评论