微信小程序
佛佛ง
前端
展开
-
微信小程序webview内嵌uniapp H5,H5可以跳转到小程序内的某个指定页面
使用uniapp开发小程序,又使用uniapp开发h5,这时候内部跳转uni.navigateTo可能分不清哪个是哪个,官方给出了解决:1、小程序中使用webview内嵌H5<template> <view style="width: 100%; height: 100%;"> <web-view v-if="url" :src="url"></web-view> </view></template&g..原创 2022-02-09 17:48:51 · 4372 阅读 · 0 评论 -
uniapp微信小程序跳转到小程序,获取目标小程序任意页面的路径
11原创 2021-12-21 17:13:15 · 1777 阅读 · 0 评论 -
uniapp 微信小程序内打开腾讯导航路线规划
1、需要在小程序后台管理,添加腾讯位置服务路线规划插件2、详情中看AppId和版本号,后面会用到这两个参数3、申请通过后,参考指南开发4、 在uniapp项目的pages.json中增加插件及开启位置服务"plugins": { "routePlan": { "version": "1.0.19", "provider": "wx50*************" } }, "permission": { "scop..原创 2021-12-21 16:29:13 · 2590 阅读 · 14 评论 -
微信支付凭证关联开发票功能的配置
凭证的下面怎么出现【开发票】???经过不懈的努力,终于找到了入口,极其艰难了,主要涉及的链接如下:1、了解下术语https://developers.weixin.qq.com/doc/offiaccount/WeChat_Invoice/E_Invoice/Instruction.html2、配置“商户+开票平台模式”https://developers.weixin.qq.com/doc/offiaccount/WeChat_Invoice/E_Invoice/Choosin...原创 2021-08-02 17:58:03 · 626 阅读 · 0 评论 -
微信小程序使用前置摄像头拍照
1、拍照页面:<template> <view title="拍照"> <camera v-if="openCamera" device-position="front" frame-size="large" class="zipai" @error="error"> </camera> <cover-image src="/static/image/renzheng_zz.png" class="zhezhao">...原创 2020-06-28 18:09:56 · 3108 阅读 · 0 评论 -
小程序实现登录、注册、忘记密码功能
业务逻辑:1、实现登录、注册、忘记密码功能2、请求后台时,传递的参数加密3、手机号、密码发给后端时,加密处理原创 2020-06-28 17:26:38 · 3759 阅读 · 8 评论 -
微信小程序-获取手机号开发
实现思路:以button组件去调用<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"> onLoad时,通过wx.login获取code,传给后端,获取openID和sessionKey method中,通过getPhoneNumber获取encryptedData,iv,组合{encryptedData、iv、sessionKey}请求后台解密获取用户手机号 注意:最后确定你的小程序是否有权限调用ge原创 2020-05-12 15:42:28 · 452 阅读 · 0 评论 -
获取地理位置uni.getLocation(object)
// 开启地图服务for 微信 // #ifdef MP-WEIXIN uni.getSetting({ success: res => { console.log("res.authSetting",res.authSetting); if (res && res.authSetting &...原创 2020-03-02 15:56:30 · 3963 阅读 · 2 评论 -
微信小程序使用getuserinfo获取用户信息
<template> <view> <view>用户昵称:{{nickName?nickName:"没有获取到用户昵称"}}</view> <button type="primary" size="mini" open-type="getUserInfo" @getuserinfo="getuserinfo">获...原创 2020-02-28 15:42:13 · 1427 阅读 · 0 评论 -
微信小程序中引用的wxs文件在uniapp中不可用的解决方法
在微信小程序中使用的wxs文件相当于执行一段js,对数据进行处理,转到uniapp中可以使用过滤器来解决这个问题。功能:m与km转化,<1000显示 m; >1000显示 km在微信小程序中使用wxs实现方法:1、在utils文件下创建一个transfer.wxs文件// m=km转化:<1000显示m;>1000显示km;var setMorKm = ...原创 2020-02-12 20:32:49 · 2628 阅读 · 0 评论 -
小程序-转发功能,使用button开放功能open-type="share"
页面内发起转发通过给button组件设置属性open-type="share",可以在用户点击按钮后触发Page.onShareAppMessage事件,相关组件:button。<button open-type="share">转发</button>// 3 button 的开放功能<button open-type="share...原创 2020-01-30 22:25:33 · 19091 阅读 · 1 评论 -
小程序-获取当前页带参数的url
<view bindtap="showPageInfo">获取当前页带参数的url</view>// 1 点击事件showPageInfo(){ var aa=this.getCurrentPageUrlWithArgs(); console.log("aa===",aa);},// 2 获取当前页带参数的urlgetCurrentPageUr...原创 2020-01-30 22:05:30 · 1640 阅读 · 0 评论 -
小程序-生命周期执行顺序
onLoad -->onShow -->onReady原创 2019-12-09 16:33:02 · 1030 阅读 · 0 评论 -
小程序-a.wxss文件引用b.wxss样式
a.wxss文件引用b.wxss样式,在a.wxss进行如下设置:@import 'venders/weui';注意:要加上【;】原创 2019-11-22 17:16:43 · 400 阅读 · 0 评论 -
小程序-一进页面就滚动到最底端
点击消息后,进入消息页面,实现滚动到最底端的动画效果。1、在页面的最下面增加一个带有id="bottom" 的组件<view class="messages"> <view class="item" wx:for="{{messages}}" wx:key="id"> <navigator> <...原创 2019-11-22 14:58:02 · 805 阅读 · 2 评论 -
小程序-适应WXS块解决当前页面的数据问题
比如,我们请求到的后端返回的图片格式是这样的: "images": [ "http://p0.meituan.net/w.h/shaitu/d4c3f2dd57837a775864f89606663bf9140591.jpg", "http://p0.meituan.net/w.h/shaitu/bc9f71b948489e5dc0458a77343a14...原创 2019-11-22 14:18:22 · 375 阅读 · 0 评论 -
小程序-轮播图预览图片功能开发
在一个程序的多个地方,都有用轮播图预览图片的功能,这时候我们可以把这个前端页面抽离出来,因为小程序是单向数据流方式,所以,数据需要在引用的当前页面定义。 图片预览前端 preview-images.wxml<swiper class="slides" indicator-dots="{{images.length > 1}}" indicato...原创 2019-11-22 12:52:01 · 890 阅读 · 0 评论 -
小程序-实现列表- 搜索功能的实现(6)
list.wxml引入搜索文件<!-- 引入搜索框 --><include src="/includes/search-bar.wxml"/>搜索文件的结构如下:<view class="weui-search-bar"> <!-- 1 搜索--> <view class="weui-search-ba...原创 2019-11-21 17:34:17 · 2591 阅读 · 1 评论 -
小程序-实现列表- 加载时显示“正在加载...”.没有数据时显示“没有更多内容了”(5)
在list.wxml中最下面设置显示与隐藏的结构:<view wx:if="{{hasMore}}" class="loadmore loading">正在加载111...</view><view wx:else class="loadmore">没有更多内容了</view>正list.wxss中设置加载的文字前面的转动圆圈:...原创 2019-11-21 17:04:01 · 5704 阅读 · 0 评论 -
小程序-实现列表-网络请求时,显示 loading 提示框(4)
请求前,显示const fetch = require('../../utils/fetch')Page({ data: { categories: [] }, gotoTest:function(){ // 显示loading wx.showLoading({ title: 'Loading...', }) fetc...原创 2019-11-21 16:57:45 · 456 阅读 · 0 评论 -
小程序-实现列表-上拉加载功能(3)
page注册onReachBottom()用于监听用户上拉触底事件,触发距离内滑动期间,本事件只会被触发一次,到底时加载数据,如下:/** * 页面上拉触底事件的处理函数 */ onReachBottom() { this.loadMore()//到底时加载数据 }, 特殊说明:1、如果想设置距离底端多少距离时触发,可以在【app.json的windo...原创 2019-11-21 11:00:30 · 596 阅读 · 0 评论 -
小程序-实现列表-下拉刷新功能(2)
下拉刷新时,请求数据结束后,需要停止刷新,如果不停止,会出现下面的bug:解决方式:因为 loadmore是异步函数,我们可以让它返回一个promise对象,再执行then,调用wx.stopPullDownRefresh())停止刷新操作/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { this.s...原创 2019-11-20 17:45:32 · 266 阅读 · 0 评论 -
小程序-实现列表-加载下一页数据功能(1)
加载数据的方法loadMore(),逻辑如下图:源码如下:data: { category: {},//分类 shops: [],//列表 pageIndex: 0,//当前页码 pageSize: 20,//每页条数 totalCount: 0,//总条数 hasMore: true,//是否加载更多 ...原创 2019-11-20 16:18:56 · 531 阅读 · 0 评论 -
小程序-动态改变导航栏名字
一种方法是在页面的json文件中进行设置,如下:{ "navigationBarTitleText": "最新消息"}有时候,我们需要实现这样的需求:比如九宫格,点击每个格,跳转到同一个页面,只是展示的数据不同。这时候,导航栏没办法设置成静态的,如何设置成动态的?1、跳转时,根据传递过来的参数获取到title值2、调用APIwx.setNavigationBar...原创 2019-11-19 16:39:39 · 1188 阅读 · 0 评论 -
小程序-轮播图的开发
1、wxml文件<!-- 1 轮播 --><swiper class="slides" autoplay="{{slides.length > 1}}" indicator-dots="{{slides.length > 1}}" indicator-color="#bcc0c9" indicator-active-color="#3...原创 2019-11-19 14:11:25 · 187 阅读 · 0 评论 -
微信小程序-通过<navigator>标签实现页面的跳转
1、界面结构:2、从demo1界面跳转到demo2界面,并传递两个参数:name和age,demo1源码如下:<!-- 跳转:带参数 --><navigator url="../demo2/demo2?name={{name}}&age={{age}}">带参数的页面跳转</navigator>Page({ data:{ ...原创 2019-11-18 13:41:11 · 1121 阅读 · 0 评论 -
微信小程序-单页面完成增、删、全选、计数、清除功能
业务逻辑:1、添加:输入框中有数据,点击手机“完成”按钮或者“+”均可添加一条新数据 2、选择:点击列表的某一项,checkbox勾选或空; 3、删除:点击某一项后面的“x”,删除该项 4、全选:点击“Toggle all”文字全选,再次点击,全部选 5、未完成量:剩余几项未完成,取决于列表中没有打勾的项数,受影响的操作包括1、2、3、4 6、清除完成:清除已完成的项,即删除打...原创 2019-10-01 14:18:48 · 2129 阅读 · 0 评论 -
微信小程序-通过绑定wx.navigate*事件实现页面的跳转
1、在index.wxml页面给按钮绑定事件<button type="primary" bindtap="navHandle">通过点击事件实现页面跳转</button>2、在navHandle()方法中调用wx.navigateTo() 设置跳转到的页面,且可以带有参数,如跳转到b.wxml页面,且把name和age值传递到b页面中 data...原创 2019-09-30 15:15:15 · 1452 阅读 · 0 评论 -
微信小程序-点击图片高亮显示的方式
第一种方式:在image外包裹一层navigator,并设置hover-class="nav-hover"<navigator url="../../pages/flex/flex" hover-class="nav-hover"> <image src="../../assets/a.jpg"></image></navigator>...原创 2019-09-30 14:44:50 · 1608 阅读 · 2 评论 -
微信小程序-单向数据流事件+this.setData()
小程序没有双向数据绑定模式,1、要么是从界面通过 事件 转换到逻辑,2、要么是从逻辑通过this.setData() 转到界面,往界面上暴露数据案例:如下界面,初始化时,输入框中值为“abc”,当在输入框中继续输入字符时,下面的"abc"和上面保持同步变化给输入框绑定事件wxml文件:<view> <input class="weui-inpu...原创 2019-09-29 14:52:41 · 315 阅读 · 0 评论 -
微信小程序-单页面事件传参
如果需要给事件处理函数传递参数,只能使用data-**方式,e.target.dataset存储传递过来的参数。1、如下:传递两个参数id 和username<view class="outer" bindtap="outerHandle"> <view class="inner" catchtap="innerHandle" data-id="01" data...原创 2019-09-29 14:26:17 · 240 阅读 · 0 评论