最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类似于html中的 window.location.href=" "eg: wx.navigateTo({ url: 'test?id=1' })实际效果如下: 小程序中左上角有一个返回箭头,可返回上一个页面 也可以通过方法  wx.navigateBack 返回原页面 二.wx.redir

小程序与h5的跳转 前提小程序管理后台配置域名白名单,并且h5页面是嵌在小程序里面(相互跳的前提条件) 在业务域名中设置好访问的h5地址 微信官方web-view 介绍地址 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 小程序跳转h5需要用到web-view这个原生组件 pages生成一个webview的目录 wxml中 <web-view src="{{url}}"><

在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现锚点跳转主要以下几点: 1.最外层容器使用 scroll-view 2.赋值scroll-into-view,如:<scroll-view scroll-into-view="{{toView}}"> 3.设置 scroll-view 滚动方向 scroll-y="t

微信小程序删除处理 没有 confrim 那怎么实现这个效果呢 可以使用小程序里的模态框 代码: wx.showModal({ title: '提示', content: '确定要删除吗?', success: function (sm) { if (sm.confirm) { // 用户点击了确定 可以调用删除方法了 } else if (sm.cancel) { console.log('用户点击取消') } } }) 微信小程序操作成功提示后跳转 wx.showToast({ title:

一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html 二.swiper应用 1.页面逻辑(index.js) Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url

锲子 微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅.如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20倍,至于安卓上运行效率无差异. 构思 结合wxs,做左滑功能主要分为三个步骤:拖动开始=>拖动中=>拖动结束 让我们看看,这三个步骤需要做好哪些工作? 拖动开始 获取触发事件点的坐标数据 将坐标数据存到组件中,“拖动中”和“拖动结束”这两步骤要用上 拖动中 拿到拖动开始时存储的坐标数据 获取每一个

当在小程序中通过 url 向 <web-view> 内嵌的 H5 传参时,当包含特殊字符时需要进行编码处理(不然 <web-view> 中是拿不到值的,小程序竟然没有错误提示...): 1.test.wxml <view> <web-view src="{{url}}"></web-view> </view> 2.test.js,对参数进行编码处理: Page({ /** * 页面的初始数据 */ data: {

在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎样与H5中的登录状态保持一致? 一般来说,后端开发同事多数会要求我们在 H5 中的接口请求中携带 cookie,来获取用户当前的登录状态.这个该如何实现呢? 分为以下几步: 1.小程序中,封装统一的接口请求方法(以便在每个接口中都携带 cookie,放在 header 中): const request =

需要在H5页面被作出判断和处理  点击事件发生时跳转到小程序内部页面 1.引入小程序提供的JS <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> 2.通常情况下一个H5页面可能应用到多个活动场景中 并不止在小程序中使用 这时候就需要在小程序里面加入一个参数作为判断 (以下代码中参数名为channel=‘we

本篇为大家介绍为何我们在最后做交互的时候,并没有使用上一篇讲的选项卡的效果.   scroll-view与跳转.gif (如无法查看图片,还请翻看上一篇!) 大家注意看,在我点击跳转后,首先能看到的是切换选项卡的一个运动过程,然后才给用户展示出被跳转的页面,开始看起来挺炫酷的,但我们觉得这不是一个好的用户体验.因为随着使用次数的增加,会让用户感觉到这个功能不能马上展示出他想要的页面,还会有一种审美疲劳的感觉.同时大家也都知道,微信小程序大小只限定在2M以内,而这种写法会增加不少的代码量,所以尽量

大多数的商城类小程序都有这个功能,点击“全部订单”,“待付款”,“待发货”,“待收货”,“已完成”,会跳转页面且跳至与之相对应的选项卡中.所以我们在开发该小程序时也做了相同的功能.如下图:   scroll-view与跳转.gif 但是我们在最后做交互的时候,并没有使用该效果,下篇再说这个!先说说这个效果是如何实现的! 选项卡静态布局思路: 主要用到 scroll-view与 swiper标签,选项卡切换主要依靠 swiper 中的 current 属性,不懂请自行查看小程序API. 跳转页面且

1, 小程序跳h5 <web-view src="https://zgl.seamo.cn/zglh5/kjzjlist1.html"></web-view> 2,h5跳小程序 wx.miniProgram.navigateTo({url: '/pages/index/kjcgcon/kjcgcon'}) 如果要传值可以直接在url后面加参数 wx.miniProgram.navigateTo({     url: '/pages/scenic/scenic_d

1.微信小程序跳转小程序 wx.navigateToMiniProgram <script src='https://res.wx.qq.com/open/js/jweixin-1.3.0.js'></script> navigateToMiniProgram(mAppId) { wx.navigateToMiniProgram({ appId: mAppId, path: 'page/index/index?id=123', extraData: { foo: 'bar' },

<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小程序提供导航相关的API: wx.navigateTo(); wx.redirectTo(); wx.navigateBack(). 使用wx.navigateTo()或者<navigator>组件跳转的页面路径最多只有5层,这些页面路径是可以通过wx.navigateBack()API或者左上角

官方推出的web-view方便了很多开发人员. 我们在做的时候,经常会想到写一个小程序的page然后通过动态加载web-view的形式来完成其他功能页面的开发. 之前研究web-view的时候发现网上很多人都在问动态加载html页面的先后顺序问题,然而都并没有一个完整的解答. 例如: <web-view src="{{web_url}}/WeiXin/{{web_path}}.html?user_token={{user_token}}&{{param}}#wechat_redir

一.App声明周期 1.App() app.js中的App() 函数用来注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等. 示例代码: App({ onLaunch: function(options) { // Do something initial when launch. }, onShow: function(options) { // Do something when show. }, onHide: function() { // Do somethin

小程序的后台获取数据方式get/post具体函数格式如下:wx.request({}) data: { logs:[] }, onLoad:function(){ this.getdata(); } getdata:function(){//定义函数名称 var that=this; // 这个地方非常重要,重置data{}里数据时候setData方法的this应为以及函数的this, 如果在下方的sucess直接写this就变成了wx.request()的this了 wx.request({

组件 小程序允许我们使用自定义组件的方式来构建页面 类似Vue的小组件 自定义组件 类似于页面,一个自定义组件由 json, wxml, wxss, js 4个文件组成 1.创建 1.创建components文件夹 2.在components文件下创建comp1文件夹 3.comp1 文件夹下创建Component文件 2.声明组件 首先需要在 json 文件中进行自定义组件声明 { "component": true, // 会自动生成 } 3.辑组件 与其他页面一样 在 wxml 

第一  保存本地数据 1.异步保存本地数据 wx.setStorage({ key:keyStr, data:dataStr, success: function(e){}, fail: function(err){}, complete: function(e){} }) 2.同步保存本地数据 wx.setStorageSync({ key:keyStr, data:dataStr }) 3.异步读取本地数据 wx.getStorage({ key:keyStr, success: funct

1.view 1.作用:类似 html 的 div 用来进行页面布局,具有块级盒子特性. 2.常用属性:设置view盒子点击后的状态,以及控制是否影响父盒子的点击状态 3.eg:<view hover-class="类名" hover-start-time=50>  view  </view> 2.scroll-view 1.作用:可滚动视图区域.每一个盒子都有自己的滚动条,可以自定义下拉刷新.上拉加载,每个视图区域互不影响. ·2.常用属性: 1.开启滚动条:

<view class="productStatus"> <span> <em>已上架</em> </span> </view> .productStatus { position: absolute; right: 0; top: 0; height: 1.81rem; width: 1.81rem; display: flex; align-items: center; } .productStatus spa