Taro实现小程序强制更新新版本

1.在app.tsx初始调用该方法

handleUpdate() {
    if (process.env.TARO_ENV === 'h5') {
        return;
    }
    const updateManager = Taro.getUpdateManager();
    updateManager.onCheckForUpdate(function(res) {
        // 请求完新版本信息的回调
        console.log(res.hasUpdate);
    });
    updateManager.onUpdateReady(function() {
        Taro.showModal({
            title: '更新提示',
            content: '新版本已经准备好,是否重启应用?',
            success: function(res) {
                if (res.confirm) {
                    // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                    updateManager.applyUpdate();
                }
            }
        });
        track(TRACKEVENTS.VERSION_UPGRADE, {
            page: '/',
            trigger: TRACKTRIGGER.APP_DID_MOUNT
        });
    });
    updateManager.onUpdateFailed(function() {
        // 新的版本下载失败
        errorReport(ERROREVENTS.VERSION_UPGRADE_FAILED, '新版本下载失败');
    });
}
    
export enum TRACKTRIGGER {
    DID_MOUNT = 'componentDidMount',
    DID_SHOW = 'componentDidShow',
    DID_HIDE = 'componentDidHide',
    REACH_BOTTOM = 'onReachBottom',
    PULL_DOWN_REFRESH = 'onPullDownRefresh',
    SHARE = 'ShareAppMessage',
    CLICK = 'click',
    PAGE_LOAD = 'page.onLoad',
    PAGE_SHOW = 'page.onShow',
    APP_DID_MOUNT = 'app.onLaunch',
    APP_SHOW = 'app.onShow'
}
export enum ERROREVENTS {
    JS_STACK_ERROR = '错误栈',
    JS_STACK_PROMISE_ERROR = 'Promise错误栈',
    TARO_ERROR = 'Taro错误边界',
    PAGE_NOT_FOUND = '页面未找到',
    HTTP_ERROR = '接口错误',
    OFFLINE = '无可用网络',
    VERSION_UPGRADE_FAILED = '版本下载失败'
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
您提到的小程序悬浮搜索框可以通过在小程序页面中使用 `navigator` 组件和 `fixed` 定位来实现。具体的实现步骤如下: 1. 在小程序页面的 `json` 文件中添加 `navigator` 组件,设置 `url` 属性为搜索页面的路径,设置 `open-type` 属性为 `navigate`,设置 `hover-class` 属性为 `none`,并在组件内部添加一个 `input` 输入框。 ```json { "usingComponents": { "navigator": "/miniprogram_npm/@tarojs/components/dist/taro-components/taro-components.esm" }, "navigationBarTitleText": "首页", "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black", "enablePullDownRefresh": true, "backgroundTextStyle": "dark", "backgroundColor": "#F5F5F5", "usingComponents": {}, "component": true, "disableScroll": true, "navigationStyle": "custom", "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "usingComponents": { "navigator": "/miniprogram_npm/@tarojs/components/dist/taro-components/taro-components.esm" }, "disableScroll": true, "navigationBarTitleText": "首页", "enablePullDownRefresh": true, "backgroundTextStyle": "dark", "backgroundColor": "#F5F5F5", "usingComponents": {} } ``` 2. 在小程序页面的 `scss` 文件中添加以下样式,设置 `navigator` 组件的位置和样式。 ```scss .navigator { position: fixed; left: 0; top: 0; right: 0; height: 40px; background-color: #fff; z-index: 999; display: flex; justify-content: center; align-items: center; padding: 0 10px; } .navigator input { width: 100%; height: 100%; border: none; outline: none; background-color: transparent; font-size: 14px; color: #333; padding: 0 10px; margin: 0; } ``` 3. 在小程序页面的 `js` 文件中添加以下代码,判断当前页面是否是搜索页面,如果是,则隐藏 `navigator` 组件;否则显示 `navigator` 组件。 ```js import Taro, { Component } from '@tarojs/taro' import { View, Input } from '@tarojs/components' class Index extends Component { config = { navigationBarTitleText: '首页' } state = { isSearchPage: false } onShow() { const pages = Taro.getCurrentPages() const currentPage = pages[pages.length - 1] const isSearchPage = currentPage.route === 'pages/search/search' this.setState({ isSearchPage }) } render() { const { isSearchPage } = this.state return ( <View className='index'> {!isSearchPage && ( <navigator className='navigator' url='/pages/search/search' open-type='navigate' hover-class='none'> <Input className='input' placeholder='请输入搜索内容' /> </navigator> )} <View className='content'>这是首页</View> </View> ) } } export default Index ``` 通过以上步骤,即可实现小程序悬浮搜索框的效果。需要注意的是,由于小程序的一些限制,`navigator` 组件在 iOS 系统下可能会出现样式问题,可以通过在 `app.js` 文件中设置 `window` 对象的 `disableScroll` 属性为 `true` 来解决。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值