分类: Uniapp

  • uniapp直接跳转应用商店

    uniapp直接跳转应用商店

    参考一:

    // 跳转应用商店
    export const jumpToAppMarket = (code) => {
    // 可以根據文檔換成其他商店 https://www.jianshu.com/p/b544810beac3
    const googlePlay = “com.android.vending”;

    if (plus.os.name == "Android") {  
        var Uri = plus.android.importClass("android.net.Uri");  
        var Intent = plus.android.importClass('android.content.Intent');  
        var main = plus.android.runtimeMainActivity();  
    
        var uri = Uri.parse("market://details?id=" + 包名);  
        var intent = new Intent(Intent.ACTION_VIEW, uri);  
        // 选择进入商店  
        intent.setPackage(googlePlay);  
        intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK;  
        // 没有该商店应用  
        if (intent.resolveActivity(main.getPackageManager()) !== null) {  
            main.startActivity(intent);  
        } else {  
            // 跳转浏览器  
            let uri = Uri.parse("https://play.google.com/store/apps/details?id=" + 包名);  
            let intent = new Intent(Intent.ACTION_VIEW, uri);  
            intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK;  
            intent.setPackage('com.android.browser');  
            main.startActivity(intent);  
        }  
    } else {  
        plus.runtime.openURL('itms-apps://itunes.apple.com/cn/app/id{appid}?mt=8');  
    }  

    参考二:安卓是指定包名跳转,iOS需要指定id

    if (plus.os.name == "Android") {
      // 跳转安卓应用市场
      let appurl = "market://details?id=com.tencent.mm" //这个是通用应用市场,如果想指定某个应用商店,需要单独查这个应用商店的包名或scheme及参数
      plus.runtime.openURL(appurl)
    } else {
      // 跳转AppStore
      let appleId = 纯数字id
      plus.runtime.launchApplication({
        action: `itms-apps://itunes.apple.com/cn/app/id${appleId}`,
      })
    }

  • uni-app项目调试

    uni-app项目调试

    调试uni-app项目

    1、浏览器项目调试

    uni-app支持多个端同时调试,调试之前我们首先要配置一下浏览器的安装路径,默认HBuilder是检测不到的。点击【运行】->【运行到浏览器】->【配置web服务器】

    在这里需要注意的是:你要在那种浏览器上调试,就将你要调试的浏览器的安装路径粘贴到对应的框中。然后就可以点击>>运行>>运行到浏览器>>选择你要运行的浏览器。就可以调试了。

    2、手机真机调试

    真机调试第一步需要安装真机调试插件,点击“运行”>>“运行到手机”>>“下载真机调试插件”,等待安装完成。

    需要注意的是,对于安卓手机,需要在手机上开启开发者模式才能进行调试。打开手机【设置】>> 【关于本机】,找到【软件版本】,连续点击五次,就可以开启开发者选项。

     进入打开 【USB调试】,插上数据线连接手机,就会自动打开开发者选项列表,找到【设置】 >> 【高级设置】>> 【开发者选项】,如下:

    完成以上步骤就正常使用真机调试了。

    在操作的过程中可能会遇到中途需要进行一次授权,点击确认就可以了,授权成功后你的手机上会安装一个HBuilder app,之后在开发环境开发的所有内容都会在app中显示。

    iphone手机相比安卓手机来说简单一些,连接手机后直接运行,但是,他会报错,需要在手机里面进行设置。如下:

    【设置】>> 【通用】>> 【设备管理】,信任一下HBuilder即可。

    3、小程序调试:

    Uni-app小程序的调试使用的是微信开发者工具,如果你是第一次使用,需要在小程序的运行配置中进行配置微信开发者工具的路径。

    点击 【运行】 >> 【运行到小程序模拟器】>> 【运行设置】

    以上运行配置完成之后,在HBuilder中点击【运行】 >> 【运行到小程序模拟器】>> 【运行需要调试的项目】,就可以在微信开发者工具上运行我们的项目了。

    使用微信开发者工具的时候需要注意两个点:

     1)微信开发者工具必须是官方最新版。

     2)微信开发者工具需要授权。

    完成以上步骤之后,就可以运行uniapp项目了,但是在编译的时候还会报一种错

    报错原因:“我们不是开发者”,需要进行开发者设置。

    解决方法是前往微信公众平台,登录小程序账号。

    登陆官网地址:https://mp.weixin.qq.com/

    登录之后进行如下操作:

     第一步:联系管理员,因为只有管理员才有权限分配开发者权限。

    第二步:管理>>成员管理>>点击【添加成员】,注意这里只有管理员的界面才有“添加成员”这一选项,普通开发者是没有这一选项的。

    第三步: 新增成员微信号并勾选权限。

    第四步:管理员扫描二维码

    管理员完成以上步骤开发者就可以正常调试程序了。

    还有一种方法就是使用小程序账号登录微信公众平台,在开发>>开发设置中,复制appid。

    在HBuilderX中找到需要调试的项目,将复制的appid粘贴到下面标注的框中。

    只要确定两个地方的appid一致,开发者就可以正常调试程序了。

  • 可视化uniapp 自动生成代码,组件、模板拖拽布局,导出整套代码

    可视化uniapp 自动生成代码,组件、模板拖拽布局,导出整套代码

    免费使用可视化uniapp 自动生成代码项目,两个工具,如下:

    一,工具一
    1.可视化拖拽表单,基础组件、模板组件,自动生成布局
    2.自定义修改组件的内容 和组件的样式
    3,可以保存你修改后的内容,保存你的设计
    4.一键导出项目全部代码,可以直接运行
    5.查看导出代码的历史记录,可以继续编辑
    6.查看源码可以看到修改后的样式自动变化
    7.可视化创建vue文件,选中文件把代码保存在vue文件中
    8.多个vue页面uniapp代码同时导出
    9.自动生成路由配置,可以实现vue页面之间的跳转

    hbuilderX开发工具可以把 uniapp 生成H5 网页、小程序、安卓、苹果

    注意:修改设计好要保存到vue文件里

    免费生成代码,自动布局,更改组件属性值

    该项目后续慢慢更新,

    代码演示示例:

    <template>
     
      <!-- 页面全局配置 -->
      <view class="pageconfig">
     
        <!--按钮0的布局样式-->
             <view class=" commoncss0">
             <view class="flex flex-wrap justify-around " style="flex-direction: row;">
             <button  v-for="(item,index) in label0List" class="cu-btn  margin-xs   round  bg-green flex-sub">{{item.btnname}}</button>
             </view>
             </view>
             
             <!--宫格组件1的布局样式-->
             <view class=" bg-cyan label1 commoncss1 cu-list grid col-5 no-border">
             <view class="cu-item" v-for="(item,index) in label1List" :key="index">
             <view>
             <image :src="item.pic" style="width: 70rpx;height:70rpx;"></image>
             </view>
             <text  style="font-size: unset;color: unset;">{{item.name}}</text>
             </view>
             </view>
             
             <!--进度条2的布局样式-->
             <view class=" commoncss2">
             <view class="cu-progress  round active round striped ">
             <view class="bg-cyan" style="width:71%">71%</view>
             </view>
             </view>
             
             <!--vuetag-->
     
      </view>
    </template>
     
     
    <script>
     
    /**    author:Mr.yang    **/
    /**    qq:987095529   **/
    /**    wx:wx987095529   **/
     
    import {
      mapState
    } from 'vuex'
    export default {
      data() {
        return {
          noMore:false,
          /**single**/
     
          label0List :[{"btnname":"按钮1","color":"red","islou":"","isblock":"1","iconcolor":"blue","iconname":"","background":"green"},{"btnname":"按钮2","color":"red","islou":"","isblock":"1","iconcolor":"blue","iconname":"","background":"green"},{"btnname":"按钮3","color":"red","islou":"","isblock":"1","iconcolor":"blue","iconname":"","background":"green"}],
    label1List :[{"id":645,"gid":54,"add_time":1634719515,"sort":11,"status":1,"name":"发票管理","pic":"https:\/\/shitangsys.cntdh.net\/\/uploads\/store\/comment\/20220410\/51302f9e797bf89e5917300f54f3a5c2.jpg","url":"\/pages\/users\/user_invoice_list\/index","image":"https:\/\/shitangsys.cntdh.net\/\/uploads\/store\/comment\/20220410\/51302f9e797bf89e5917300f54f3a5c2.jpg"},{"id":647,"gid":54,"add_time":1634719515,"sort":9,"status":1,"name":"联系客服","pic":"https:\/\/demo43.wuht.net\/uploads\/attach\/2021\/09\/20210923\/855a5e9a3f2f6e14c207bc98c54118eb.png","url":"\/pages\/customer_list\/chat"},{"id":648,"gid":54,"add_time":1634719515,"sort":8,"status":1,"name":"优惠券","pic":"https:\/\/demo43.wuht.net\/uploads\/attach\/2021\/09\/20210923\/705286c880d505cd7587dd2c3533ed73.png","url":"\/pages\/users\/user_coupon\/index"},{"id":649,"gid":54,"add_time":1634719515,"sort":7,"status":1,"name":"我的收藏","pic":"https:\/\/demo43.wuht.net\/uploads\/attach\/2021\/09\/20210923\/eb4a2195830194d18e26c92208b42acf.png","url":"\/pages\/users\/user_goods_collection\/index"},{"id":650,"gid":54,"add_time":1634719515,"sort":6,"status":1,"name":"地址信息","pic":"https:\/\/demo43.wuht.net\/uploads\/attach\/2021\/09\/20210923\/a95f58dd94ccf8052b4c04c73a23a46c.png","url":"\/pages\/users\/user_address_list\/index"},{"id":651,"gid":54,"add_time":1634719515,"sort":5,"status":1,"name":"我的余额","pic":"https:\/\/demo43.wuht.net\/uploads\/attach\/2021\/09\/20210923\/87804b5b967d2d5c66e9d1b86c744b4d.png","url":"\/pages\/users\/user_money\/index"}],
    label2List :[],
    /**vuejs**/
             
             
             
          incomeList:[]
        };
      },
      onLoad() {
     
      },
      methods:{
         /**
         *          $vuetag = "";
         *          $vuecss = "";
         *          $vuejs = "";
         *
         */
        /**method**/
        //获取数据
     
      }
    }
    </script>
     
    <style lang="less">
     
     
    /**
     *   此处必须引用colorui样式,并放入根目录,css样式可以这样写
    	@import "colorui/main.css";
    	@import "colorui/icon.css";
     如需要引用colorui到全局,
     需要在App.vue 引入
     	@import "colorui/main.css";
    	@import "colorui/icon.css";
     *
     */
     
     
    page{
      background-color: #F8F9FB;
    }
     
     
     	
    	/**本页全局配置的代码**/
    .pageconfig 
    {
    		width:  100%;
    		height:  100vh;
    		overflow:  hidden;
    		overflow-y:  scroll;
    }
     
     
     
     /**pagedomcss**/
     
     
     	
    	/**本页按钮0的css代码**/
    .commoncss0 
    {
    		font-size: 26rpx;
    }
    	
    	/**本页宫格组件1的css代码**/
    .commoncss1 
    {
    		font-size: 26rpx;
    }
    	
    	/**本页进度条2的css代码**/
    .commoncss2 
    {
    		font-size: 26rpx;
    		border-top-left-radius: 20rpx;
    		border-top-right-radius: 20rpx;
    		border-bottom-right-radius: 20rpx;
    		border-bottom-left-radius: 20rpx;
    }
    /**vuecss**/
     
     
     
     
     
     
    </style>

    拖拽组件可以完成布局

    1,拖拽生成代码 ,可视化设置属性,自动生成uniapp代码

    链接地址为:

    http://119.91.145.229:8011/admin/bigdata2

    二,工具二

    十大特性


    1.可视化,自由拖拽,推导出flex布局,尽可能兼容多端(h5,微信小程序)

    2.支持uviewui内置所有图标,也可以使用阿里图标库160万+图标(需填写网络路径)

    3.支持在遮罩mask,弹窗Popup,modal 等组件,直接拖拽,绘制

    4.对于常用的表单组件,可直接帮你生成相关事件,时间,单列多列等选择器等支持数据回显功能(免开发)– 在拖拽面板中的(formitem 表单项中)

    5.右键菜单,二十几种对齐方式,支持单选多选,单行弹性对齐

    6.集成网络上用于解压的趣味聊天室

    7.开发者,可自由创作布局,然后上传(共享给其他开发人员使用)

    8.支持简单事件代码片段

    9.支持绑定变量(对象格式,对象数组格式(下标要从0开始)),直接在vue中生成相关格式的数据

    10.支持免费cdn图床,可在项目中直接使用

    部分操作(一套代码,h5端和微信端通用,其他没有测试):

    uniapp页面速成提效工具:
    uniapp uview ui 可视化,完全自由拖拽,一键生成flex代码网站:
    http://aicode.shagua.wiki/uni/index.html#/

  • uni-app 条形码(一维码)/二维码生成实现

    uni-app 条形码(一维码)/二维码生成实现

    组件推荐

    我们在用 uni-app 开发前端时,有时会用到条形码或者二维码,甚至一个页面同时用到条形码和二维码。笔者推荐使用以下两个组件:

    uni-app 条形码生成器:barcode 源码和文档说明
    uni-app 二维码生成器:qrcode 源码和文档说明

    不过,有点小小的遗憾,这两个组件存在一些不完美的地方。笔者进行了一些优化,并修复了在支付宝小程序中使用无法刷新条形码的问题。大家也可以直接下载笔者优化后的文件(uniapp条形码和二维码生成器.zip),解压后(条形码:tki-barcode、二维码:tki-qrcode)放在 components 文件夹下。

    使用方式

    自定义组件

    自定义一个组件,代码如下:

    <template>
        <view class="component text-center">
            <view class="component-title">条形码和二维码混用</view>
            <view class="component-code">
                <tki-barcode
                    ref="barcode"
                    onval
                    :val="code"
                    :load-make="true"
                    :opations="barOpations"/>
            </view>
            <view class="component-qr">
                <tki-qrcode
                    ref="qrcode"
                    onval
                    :val="code"
                    :size="250"
                    :load-make="true"
                    :show-loading="false"/>
            </view>
            <view class="coupon-no-view">
                <text>编号:</text>
                <text class="coupon-no">{{ code }}</text>
            </view>
        </view>
    </template>
    
    <script>
        import tkiBarcode from '@/components/tki-barcode/tki-barcode'
        import tkiQrcode from '@/components/tki-qrcode/tki-qrcode'
        
        export default {
            components: {
                tkiBarcode,
                tkiQrcode
            },
            data() {
                return {
                    code: '',
                    barOpations: {
                        height: 150,
                        displayValue: false
                    }
                }
            },
            methods: {
                init () {
                    this.code = '1234567890' // 生成一维码和二维码
                    setTimeout(() => {
                        this.code = '0987654321' // 5 秒后刷新一维码和二维码
                    }, 5000)
                }
            }
        }
    </script>
    
    <style lang="scss" scoped>
        .component {
            border-radius: 16rpx;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background: #FFFFFF;
            flex: 1;
            margin: 64rpx;
            padding: 64rpx 32rpx;
            &-title {
                max-height: 112rpx;
                font-size: 40rpx;
                font-weight: 600;
                line-height: 56rpx;
                overflow: hidden;
            }
            &-code {
                height: 150rpx;
                margin: 32rpx 32rpx 0;
            }
            &-qr {
                height: 250rpx;
                margin-top: 36rpx;
            }
            .coupon-no-view {
                margin: 0 18rpx;
                height: 76rpx;
                border-radius: 8rpx;
                border: 2px solid #F5F5F5;
                display: flex;
                align-items: center;
                padding: 0 24rpx;
                margin-top: 36rpx;
                text {
                    font-size: 24rpx;
                    font-weight: 400;
                    &:first-child {
                        color: #999999;
                    }
                }
                .coupon-no {
                    flex: 1;
                    text-align: left;
                }
            }
        }
    </style>

    使用自定义组件

    在需要使用这个组件的地方引入使用,并在 onLoad 或其他需要使用一维码/二维码的方法中直接调用 init,如下:

    export default {
        onLoad(option){
            this.$nextTick(() => {
                this.$refs['code'].init()
            })
        }
    }

    最终效果图如下:

    版权属于:瞭月

    本文链接:https://www.lervor.com/archives/113/


  • uni-app 页面应用内跳转与应用外跳转的实现方式

    uni-app 页面应用内跳转与应用外跳转的实现方式

    我们在用 uni-app 开发前端应用时,页面跳转是必不可少的。页面跳转主要包含应用内跳转(站内跳转)和应用外跳转(外部跳转)。下面我们一起来看看具体实现方式。

    站内跳转

    站内跳转主要有两种实现方式,可以通过组件和 API 接口方式实现。

    采用 navigator 组件

    <template>
        <view>
            <navigator url="/pages/view/view?id=1" open-type="navigate">
                <button type="default">跳转到新页面</button>
            </navigator>
        </view>
    </template>

    采用 API 接口

    <template>
        <view>
            <button type="default" @tap="toView">跳转到新页面</button>
        </view>
    </template>
    
    <script>
        export default {
            methods: {
                toView () {
                    uni.navigateTo({
                        url: '/pages/view/view?id=1'
                    })
                }
            }
        }
    </script>

    open-type 主要有效值与 API 的对应关系

    值对应 API说明
    navigateuni.navigateTo保留当前页面,跳转到应用内的某个页面
    redirectuni.redirectTo关闭当前页面,跳转到应用内的某个页面
    switchTabuni.switchTab跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
    reLaunchuni.reLaunch关闭所有页面,打开到应用内的某个页面
    navigateBackuni.navigateBack关闭当前页面,返回上一页面或多级页面

    更多规则可查看:官方文档

    目标页面参数接收:

    <script>
        export default {
            onLoad: function (option) { // option为object类型,会序列化上个页面传递的参数
                console.log(option.id) // 打印出上个页面传递的参数。
            }
        }
    </script>

    外部跳转

    外部跳转直接可以使用 web-view 组件,会自动铺满整个页面。

    步骤1:在项目根路径下的 pages 目录下,新建一个页面,用于专门放置外部网站

    <template>
        <web-view :src="url"></web-view>
    </template>
     
    <script>
        export default {
            data() {
                return {
                    url: null  //要打开的外部链接
                }
            },
            onLoad: function (option) {
                this.url = option.url
            }
        }
    </script>

    步骤2:配置 pages.json

    {
        "pages": [
            ……,
            {
                "path": "pages/web-view/web-view",
                    "style": {
                        "navigationBarTitleText": "页面标题"
                    }
                }
            }
        ]
    }

    步骤3:在需要跳转的页面,通过 navigator 组件或 API 进行跳转

    <template>
        <view>
            <navigator url="/pages/web-view/web-view?url=https://www.baidu.com/">访问百度</navigator>
        </view>
    </template>
  • uniapp切换页面,uniapp跳转到外部链接

    uniapp切换页面,uniapp跳转到外部链接

    uni-app页面跳转

    刚做了一个uni-app的项目,在这总结一下跳转和传递数据

    uni.navigateTo(OBJECT)

    保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

    参数
    例子uni.navigateTo({ url: ‘test?id=1&name=uniapp’ /*这是跳转到的页面路径,?id=1这些都是传递的数据,可以直接在test页面接受});

    接受数据代码如下:onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数 console.log(option.id); //打印出上个页面传递的参数。 console.log(option.name); //打印出上个页面传递的参数。 }

    uni.redirectTo(OBJECT)

    关闭当前页面,跳转到应用内的某个页面。

    参数
    例子uni.redirectTo({ url: ‘test?id=1’});

    uni.reLaunch(OBJECT)

    关闭所有页面,打开到应用内的某个页面。

    参数
    例子uni.reLaunch({ url: ‘test?id=1’});

    uni.switchTab(OBJECT)

    跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

    参数
    例子
    pages.json{ “tabBar”: { “list”: [{ “pagePath”: “pages/index/index”, “text”: “首页” },{ “pagePath”: “pages/other/other”, “text”: “其他” }] }}

    other.vueuni.switchTab({ url: ‘/pages/index/index’});

    uni.navigateBack(OBJECT)

    关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

    参数
    例子// 此处是A页面uni.navigateTo({ url: ‘B?id=1’});// 此处是B页面uni.navigateTo({ url: ‘C?id=1’});// 在C页面内 navigateBack,将返回A页面uni.navigateBack({ delta: 2});

    官网地址uni-app传参

    uni.setStorageSync(KEY,DATA)
    将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
    可以直接将需要传递的数据本地存储起来,但是这种方法有很多弊端,只有在适合的情况下才能使用

    参数
    例子try { uni.setStorageSync(‘storage_key’, ‘hello’);}

    链接传参

    这个方法用的比较多,直接在跳转到的链接后边加?传递的数据,上边也提到过。

    例子

    1.传递数字,字母等固定的值uni.navigateTo({url:’页面路径?id=1′ }) /*****接收数据*****/ 在跳转到的页面下 onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数 console.log(option.id); //打印出上个页面传递的参数。 }

    2.传递变量uni.navigateTo({url:’页面路径?id= this.id’})

    接收数据的方法都一样。快三稳赚10大技巧面uni.navigateTo({ url: ‘B?id=1’});// 此处是B页面uni.navigateTo({ url: ‘C?id=1’});// 在C页面内 navigateBack,将返回A页面uni.navigateBack({ delta: 2});

    官网地址uni-app传参

    uni.setStorageSync(KEY,DATA)
    将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
    可以直接将需要传递的数据本地存储起来,但是这种方法有很多弊端,只有在适合的情况下才能使用

    参数
    例子try { uni.setStorageSync(‘storage_key’, ‘hello’);}

    链接传参

    这个方法用的比较多,直接在跳转到的链接后边加?传递的数据,上边也提到过。

    例子

    1.传递数字,字母等固定的值uni.navigateTo({url:’页面路径?id=1′ }) /*****接收数据*****/ 在跳转到的页面下 onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数 console.log(option.id); //打印出上个页面传递的参数。 }

    2.传递变量uni.navigateTo({url:’页面路径?id= this.id’})

    接收数据的方法都一样。

  • uniapp 移动端嵌套H5使用swiper,swiper-item嵌套web-view组件滑动切换

    uniapp 移动端嵌套H5使用swiper,swiper-item嵌套web-view组件滑动切换

    <swiper style="z-index: 99999;" :current="swiperCurrent" @transition="transition"  
                @animationfinish="animationfinish" class="swiper">  
                <swiper-item class="swiper-item">  
                    <web-view id="website-list" :webview-styles="webviewStyles" src="https://www.xxx.com">  
                    </web-view>  
                    <cover-view class="active">  
                        我是webView  
                    </cover-view>  
                    </block>  
                </swiper-item>  
    </swiper>

    web-view 组件在 H5端 被转成 iframe 挂载到 body 下,类似于 vue3 的 teloport,在实现时设计如此,而此时滑动的是 swiper-item 组件,所以呈现为无法左右滑动。
    针对当前业务场景可以采用 iframe 标签实现您的需求。

    <swiper>  
        <swiper-item>  
            <iframe src="https://www.xxx.com"></iframe>  
        </swiper-item>  
        <swiper-item>  
            <iframe src="https://www.xxx.com"></iframe>  
        </swiper-item>  
        <swiper-item>  
            <iframe src="https://www.xxx.com"></iframe>  
        </swiper-item>  
    </swiper>

    如果是WP提供的嵌套APP,则可以直接使用最上面的代码嵌入即可,如下:

    
    
    <swiper style="z-index: 99999;" :current="swiperCurrent" @transition="transition"  
                @animationfinish="animationfinish" class="swiper">  
                <swiper-item class="swiper-item">  
                    <web-view id="website-list" :webview-styles="webviewStyles" src="https://www.xxx.com">  
                    </web-view>   
                </swiper-item>  
    </swiper
    
    
  • Android 和 IOS 平台签名证书生成指南

    Android 和 IOS 平台签名证书生成指南

    有安卓开发经验的朋友对这个应该不陌生,生成方法也有很多,我这里只对没有经验的朋友做以下简单指导。

    如果您不想看以下的一堆文字,请前往:yunedit.com/createcert 自动生成,具体生成和使用方法此网站有说明。

    如果您想亲自尝试生成证书,请看下面流程。

    keystore的作用

    Android平台打包发布apk应用,需要使用数字证书(.keystore文件)进行签名,用于表明开发者身份。

    Android证书的生成是自助和免费的,不需要审批或付费。

    此教程的目的是生成.keystore文件,或者获取.keystore文件的 MD5 和 SHA256 参数。

    windows平台生成证书的方法:

    安装java,并配置环境变量

    1、下载JRE软件:https://pan.baidu.com/s/1Jc7zGroF8QdB7QuxaCqKtw 解压码:4tjz

    2、安装JRE软件,直接常规软件安装方法,点下一步,直到完成即可。记录下安装目录,比如:C:\Program Files\Java\jre1.8.0_231

    3、windows 桌面双击进入我的电脑,然后鼠标右键选择属性。

    4、设置环境变量

    5、再设置一个path环境变量

    使用 win+q 快捷键打开windows搜索,输入cmd 打开命令提示符,输入 java -version 如果出现下面的提示,表示已经安装成功

    生成 keystore 文件,或者获取 keystore 文件的 MD5 和 SHA256

    如果以前通过春哥介绍的方法,在线生成过 .keystore 文件,请按照下面 情况一 来操作。如果您是初次打包APP,并未生成过 keystore文件,请按照 情况二 来操作。如果您不记得是否生成过 .keystore 文件,请直接参照 情况二。

    情况一:已有 .keystore 文件,获取它的 MD5 和 SHA256 的方法

    1、使用 win+q 快捷键打开windows搜索,输入cmd 打开命令提示符

    2、使用cd命令,定位到您的 .keystore 文件目录,如果不知道 keystore 文件在哪里,可以在 HBuilderX 软件->发行->云打包中查看证书文件路径。比如我的路径是 d:\qibier.keystore。

    3、使用 keytool 命令,查看 MD5 和 SHA256 值,如下图所示:

    keytool -list -v -keystore d:\qibier.keystore

    命令行红色部分为你的 .keystore 文件路径

    情况二:生成全新的 .keystore 文件

    生成全新 .keystore 文件的命令行:

    keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

    testalias :是证书别名,可修改为自己想设置的字符,建议使用英文字母和数字

    test.keystore :是证书文件名称,可修改为自己想设置的文件名称

    要查看你生成的这个文件的md5,sha256等信息,请使用上面 情况一 中的方法。

    至此,我们已经可以自己生成.keystore文件,并且获取它的信息了。

    windows平台IOS生成证书的方法:

    采用第三方工具:香蕉云编 https://www.yunedit.com/

  • 基于Uni-app+FastAdmin开发的应用插件!

    基于Uni-app+FastAdmin开发的应用插件!

    基于Uni-app+FastAdmin开发的应用插件!

    官方主站:https://www.fastadmin.net/uniapp.html