![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小程序
文章平均质量分 54
Milk595
努力做自己喜欢做的事
展开
-
【小程序】授权逻辑封装实践【举例获取用户位置,超简单易懂!!】
小程序获取用户位置授权流程前言小程序在开发过程中很多地方需要用户的授权,需要查询用户是否授权,没有授权引导用户去授权。所以我就把这个流程做了下封装,小可爱们可以参考一下,多多提意见一起进步流程图有时候项目的很多地方都会用到判断用户是否授权的逻辑,所以封装是非常有必要的。下面我们拿位置授权作为例子说一下一般的流程很多应用在一进入就会让用户授权地理位置,可以拿到用户的经纬度通过计算获取距离用户的距离。下面是一个简单的流程图开发先要通过wx.getSettiing()获取用户的当前设置,官方文档转载 2020-09-23 09:34:21 · 754 阅读 · 0 评论 -
【小程序】WXS时间戳处理、WXS文件使用方式
WXS时间戳处理wxs 获取当前日期没法使用new Date,但可以用Date() 代替目录文件代码演示// 时间戳转化日期格式 yy-mm-dd hh:mm:ssfunction newFormatTime(timestamp) { var date = getDate(timestamp * 1000);//时间戳为10位需*1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10原创 2020-08-27 19:48:01 · 1805 阅读 · 1 评论 -
【小程序】wx.request()封装网络请求
wx.request请求封装微信提供了api,开发者可以通过wx.request来获取服务器的数据和传递数据。虽然api提供了很大的方便,但是调用多个接口时,代码重复性太高,我们可以进一步封装。wx.request(Object object)发起 HTTPS 网络请求参数示例代码wx.request({ url: 'test.php', // 示例接口 data: { x: '', y: '' }, header: {原创 2020-08-26 18:39:47 · 889 阅读 · 0 评论 -
【小程序】wx.getSystemInfo() 、自定义状态栏
wx.getSystemInfo(Object object) / 自定义状态栏wx.getSystemInfo(Object object)获取系统信息参数Object object(红色框为常用)object.success 回调函数(列举常用的几个,具体看官方文档)Object res示例代码wx.getSystemInfo({ success({ console.log(res.windowWidth); console.log(res.w原创 2020-08-26 12:36:38 · 3228 阅读 · 1 评论 -
【小程序】wx.showLoading()、wx.getUserInfo()
wx.showLoading(Object object)显示 loading 提示框。需主动调用 wx.hideLoading才能关闭提示框参数Object object (红色框为常用)代码示例wx.showLoading({ title: '加载中', mask: true})setTimeout(function () { wx.hideLoading()}, 2000)效果注意wx.showLoading和wx.showToast同时只能显示原创 2020-08-25 19:03:11 · 2894 阅读 · 0 评论 -
【小程序】解析二维码decodeURIComponent()
解析二维码decodeURIComponent()二维码内容获取一个小城序,类似于街边自动贩卖机扫码出货的模式,因为我们需要用户扫码进入小程序,每一个货柜都有一个对应的二维码,当然每个二维码里的信息也不一样。用户扫码进入小程序之后,二维码的信息会以参数q带进去,而我们只能在onLoad事件中拿到这个参数,见下图获取到的信息是经过**encodeURIComponent()编码的,所以需要用decodeURIComponent()**解码补充知识点:JavaScript decodeURICom原创 2020-08-25 13:43:47 · 4462 阅读 · 0 评论 -
【小程序】分包加载--解决主包2M限制的问题
分包加载–解决主包2M限制的问题背景:2017.01.09 小程序上线时,微信限制了代码包不能超过1MB 大小,(现在是2M了)限制大小是出于对小程序启动速度的考虑,希望用户在使用任何一款小程序时,都能获得一种“秒开”体验。然而,2MB的大小也限制了小程序功能的扩展,小程序业务的发展可能需要更大的体积。那么,能否有一种方案,在增加小程序包大小的同时,也能保持不错的启动速度呢?为了解决这个矛盾点,微信推出了「分包加载」这个技术方案。分包加载的介绍大部分小程序都会由某几个功能组成,通常这几个功原创 2020-08-25 13:40:33 · 1594 阅读 · 0 评论 -
【小程序】没有数据时,友好提示
没有数据时,友好提示第一版本先看效果:代码目录:代码演示:index.html<view class="noMessages" wx:if="{{!messageList.length}}"> <image src="../../images/空.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image> <view class="noMessages-te原创 2020-08-25 13:37:10 · 1012 阅读 · 0 评论 -
【小程序】自定义弹框组件的实现【绝对实用!!!】
自定义弹框组件的实现话不多说先看效果初始页面,未点击按钮时:当点击按钮时:弹框从上至下滑动下面,一个动画过程点击取消或确定,会向上滑动,直至消失,一个动画过程!!弹框组件组件目录文件代码如下index.wxml<view class="pop-box-main {{position}}-class" wx:if="{{position!='fade' || show}}" animation="{{animationData}}" bindanimationend="en原创 2020-08-24 18:54:39 · 845 阅读 · 0 评论 -
【小程序】自定义组件slot的使用
自定义组件slot的使用小程序自定义组件slot的使用在自定义的组件中使用插槽slot自定义组件<view class="content"> <view class="title-box">标题1</view> <slot class="contant-box" name="自定义名字"></slot></view>要使用该组件的页面<!--卡片--><cards> // 自定转载 2020-08-24 18:33:30 · 908 阅读 · 0 评论 -
【小程序】什么是事件?事件使用方式、事件分类、事件对象
什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息,如 id, dataset, touches。事件的使用方式在组件中绑定一个事件处理函数。如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。<view id="tapTest" data-hi="Weixin" bindtap="tapName"> C原创 2020-08-24 12:27:33 · 758 阅读 · 0 评论 -
【小程序】页面返回及刷新当前页面
小程序开发过程中经常会遇到列表页面新增或删除操作,当操作成功之后需要跳转到列表页面,用到如下方法:(1)返回上一级页面并设置上个页面列表数据更新:var pages = getCurrentPages(); var prevPage = pages[pages.length - 2]; //上一个页面prevPage.setData({ "list": []}) //更新上一个页面列表数据为空wx.navigateBack({ delta: 1, succes转载 2020-08-20 11:55:12 · 924 阅读 · 0 评论 -
【小程序】列表渲染 案例练习
先看效果代码演示第一步:外层使用一个block包裹<block wx:for="{{post_key}}" wx:for-item="item" wx:for-index="idx"><text>{{idx}}</text> <view class="post-container"> <view class="post-author-date"> <image src="{{item.author_原创 2020-08-19 23:12:11 · 229 阅读 · 0 评论 -
【小程序】wx.reLaunch()、wx.showModal()
wx.reLaunch(Object object)关闭所有页面,打开到应用内的某个页面应用场景:登陆跳转到其他页面参数(红色框为常用)示例代码:wx.reLaunch({ url: 'test?id=1'})Page({ onload(option) { console.log(option.query) }})wx.showModal(Object object)显示模态对话框应用场景:小程序初始化时授权登录提醒参数(红色框为常用)原创 2020-08-18 16:11:43 · 2549 阅读 · 0 评论 -
【小程序】小程序开发登录流程!!!!【看不懂算我输!!】
小程序登录登录流程时序(重点)说明调用wx.login()获取 临时登录凭证code ,并回传到开发者服务器。调用auth.code2Session接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。注意会话密钥 session_key 是对用户数据进行加密签名的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。临时原创 2020-08-17 18:34:35 · 879 阅读 · 0 评论 -
【小程序】何为授权(scope)?获取小程序已经向用户请求过的权限(wx.getSetting(Object object))
何为授权?scope授权部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ,用户选择对 scope 来进行授权,当授权给一个 scope 之后,其对应的所有接口都可以直接使用。此类接口调用时:如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;如果用户已授权,可以直接调用接口;如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。常用:获取用户授权设置开发者可以使用wx.getSetting获取用户当前的授权状态原创 2020-08-17 18:27:47 · 3763 阅读 · 1 评论 -
【小程序】数据缓存、获取当前位置信息
获取当前位置信息获取用户地理位置信息1.配置app.json文件{ "pages": ["pages/index/index"], "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位 } }}配置好上面的信息后,使用wx.getLocation(Object object)参数:(红色框为常用)示例代码:wx.get原创 2020-08-17 18:27:04 · 564 阅读 · 0 评论 -
【小程序】全局变量(globalDate)的定义和调用
一、在小程序文件app.js里面定义全局变量二、在页面上使用或修改在页面中引入调用全局变量值改变全局变量值转载 2020-08-17 15:14:43 · 861 阅读 · 0 评论 -
【小程序】页面生命周期、数据绑定与setData数据修改、初改新闻列表Demo
页面 Page 实例的生命周期示例代码// pages/posts/posts.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log('onload'); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () {原创 2020-08-16 15:25:35 · 1295 阅读 · 0 评论 -
【小程序】构建新闻列表Demo
构建新闻列表Demo(上)目录如下初始效果(未加CSS)代码如下 <view> <view> <image src="/images/avatar/1.png"></image> <text>Sep 8 2020</text> </view> <text>云澈、萧澈</text> <image src="/im原创 2020-08-16 14:11:45 · 219 阅读 · 0 评论 -
【小程序】全局配置、页面配置
小程序配置全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。具体配置项参看以下文章:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.htmlwindow配置项–自定义导航栏示例:页面配置每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app原创 2020-08-16 01:20:39 · 159 阅读 · 0 评论 -
【小程序】Swiper组件构建轮播图、Swiper组件属性设置
使用Swiper组件构建轮播图swiper(微信开放文档)红色框属性为常用注意: 在 swiper-item 里面放置 image 需要在 swiper 里设置宽高样式才是有效的,swiper-item 里面设置无效,看图二,而在 image 写内联样式,则会只有宽度有效,高度不会达到预期效果。swiper-item(微信开放文档)记住:swiper-item 也是一个容器例子:每个5秒自动轮播图片目录如下代码如下<!--pages/posts/posts.wxml-原创 2020-08-15 21:11:39 · 935 阅读 · 0 评论 -
【小程序】认识其中的rpx、flex(弹性盒子)快速布局
认识其中的rpx小程序用image加载图片时候,如果没有设置css,默认大小width:300px height:225px建议文本都写在<text></text>因为了解rpx与px有什么区别?小程序设置rpx的目的:为了内容的高宽会随着机型变化(型号、分辨率的不同)会有一个自动的适应小程序中用px:则不会自适应效果...原创 2020-08-15 20:13:37 · 422 阅读 · 0 评论 -
【小程序】view+text实现原生静态按钮
view+text实现原生静态按钮目录如下index.wxml<!--按钮--> <view class="button"> <text>使用</text> </view>index.wxss/* pages/index/index.wxss */.button { width: 100%; padding: 20rpx 20rpx; background: red;} .button text原创 2020-08-15 13:23:02 · 144 阅读 · 0 评论 -
【小程序】页面介绍、应用程序级别文件
页面文件目录index文件、log文件都属于页面文件文件后缀名类比:应用程序级别文件(唯一)全局逻辑、全局样式、全局配置一些原则:1.就近原则,在页面级别中的CSS对应当前页面级别,应用程序级别样式对应全局样式2.页面级别设置了样式.css,会覆盖应用程序级别的全局样式3.页面级别设置了配置.json,会覆盖应用程序级别的全局配置小程序代码总体体积不能超过2MB,可以使用分包加载(一般不建议,2MB够了)// 小程序内置文件<view></view>原创 2020-08-14 23:58:21 · 277 阅读 · 0 评论 -
【小程序】详情里面的本地设置
创建项目时的一个问题:如果填写了AppID需要在本地设置做一个勾选原因:这样才能请求到后端数据原创 2020-08-14 23:06:03 · 247 阅读 · 0 评论 -
【小程序】wx:if 条件渲染
条件渲染wx:if在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:<view wx:if="{{condition}}"> True </view>也可以用 wx:elif 和 wx:else 来添加一个 else 块:<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view原创 2020-08-14 10:09:20 · 1162 阅读 · 1 评论 -
【小程序】wx:for 列表渲染
列表渲染wx:for在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item<view wx:for="{{array}}"> {{index}}: {{item.message}}</view>Page({ data: { array: [{ message: 'foo', }, { message: 'b原创 2020-08-14 10:03:54 · 283 阅读 · 0 评论 -
【小程序】单页面自定义头部标题 以及 图标+文字同行【代码练习】
先看效果:代码如下:文件目录:pages/goodsOrder单页面自定义头部标题index.json{ "navigationBarTitleText": "商品订单"}图标+文字同行index.wxml <!--商品订单头部--> <view class="orderHeader"> <view class=""> <text class原创 2020-08-14 09:55:42 · 656 阅读 · 1 评论