直击根源:vue项目微信小程序页面跳转web-view不刷新

背景

最近项目需要适配小程序,项目是使用了vue开发的网站,其中改造方式是,每个页面都使用小程序创建一个页面通过web-view来显示指定页面的。

在没有使用小程序时,路由跳转时,刷新页面等等,这个是很顺畅的,在使用了小程序之后,需要适配小程序的页面,比如后退到前一页,这个时候要刷新页面,于是遇到了小程序的一些特性。

问题描述

有两个页面:A=http://demo.com/#/A?code=12,B=http://demo.com/#/B?index=2

A页面跳到B页面,B页面把一些处理后的结果以参数的形式传给A页面。

例如:B页面的使用了wx.navigateBack(其它跳转函数同理),且url(http://demo.com/#/A?code=12&index=12)以参数的形式传给了A页面,A页面在OnShow方法里面重新设置了web-view的src地址,能保证正确,但是页面就是不刷新,且使用微信开发者工具,能看到src已经被改变了。

尝试解决

  1. 网上一些方法:比如先设置src为空字符串,然后再通过setTimeout设置src为期望的值,且要设置时间为60ms以上(玄学),这个

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一个用于构建用户界面的渐进式框架,而微信小程序是一种基于微信平台开发的应用程序。在 Vue.js 中编写微信小程序登录注册界面需要使用到小程序开发框架的 API 和组件库。 以下是一个简单的微信小程序登录注册界面的示例,使用了 Vue.js 和小程序开发框架的 API 和组件库: 1. 创建一个 Vue.js 项目,并安装微信小程序开发框架的依赖: ``` npm install --save-dev miniprogram-api-typings npm install --save-dev miniprogram-api-promise ``` 2. 创建一个微信小程序页面,命名为 `login`,并在 `login.vue` 文件中编写登录注册界面的 UI 和逻辑: ``` <template> <view> <input v-model="username" placeholder="请输入用户名" /> <input v-model="password" placeholder="请输入密码" /> <button @click="login">登录</button> <button @click="register">注册</button> </view> </template> <script> export default { data() { return { username: '', password: '', }; }, methods: { login() { // 调用微信小程序登录接口进行登录操作 wx.login({ success: res => { // 登录成功后,将 token 存储到本地存储中 wx.setStorageSync('token', res.code); // 跳转到首页 wx.navigateTo({ url: '/pages/index/index', }); }, }); }, register() { // 跳转到注册页面 wx.navigateTo({ url: '/pages/register/register', }); }, }, }; </script> ``` 在上面的代码中,我们使用了 Vue.js 的模板语法编写了登录注册界面的 UI,然后在 `methods` 中编写了登录和注册的逻辑。在登录时,我们调用了小程序开发框架提供的 `wx.login()` 接口进行登录操作,并将登录成功后返回的 `code` 存储到本地存储中,然后跳转到首页;在注册时,我们跳转到注册页面。 3. 创建一个微信小程序页面,命名为 `register`,并在 `register.vue` 文件中编写注册界面的 UI 和逻辑: ``` <template> <view> <input v-model="username" placeholder="请输入用户名" /> <input v-model="password" placeholder="请输入密码" /> <button @click="submit">提交</button> </view> </template> <script> export default { data() { return { username: '', password: '', }; }, methods: { submit() { // 调用微信小程序网络请求 API 发送注册请求 wx.request({ method: 'POST', url: 'https://example.com/api/register', data: { username: this.username, password: this.password, }, success: res => { // 注册成功后,跳转到登录页面 wx.navigateTo({ url: '/pages/login/login', }); }, }); }, }, }; </script> ``` 在上面的代码中,我们使用了 Vue.js 的模板语法编写了注册界面的 UI,然后在 `methods` 中编写了注册的逻辑。在提交注册信息时,我们调用了小程序开发框架提供的 `wx.request()` 接口发送注册请求,并在注册成功后跳转到登录页面。 以上就是使用 Vue.js 编写微信小程序登录注册界面的简单示例。需要注意的是,在使用 Vue.js 开发微信小程序时,需要结合小程序开发框架的 API 和组件库进行开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值