千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > kbone高级 - 环境判断

kbone高级 - 环境判断

来源:千锋教育
发布人:wjy
时间: 2022-10-10 17:14:24 1665393264

  1、用法

  对于开发者来说,可能需要针对不同端做一些特殊的逻辑,因此也就需要一个方法来判断区分不同的环境。kbone 推荐的做法是通过 webpack 注入一个环境变量:

kbone高级-环境判断1

  后续在业务代码中,就可以通过 process.env.isMiniprogram 来判断是否在小程序环境:

kbone高级-环境判断2

  2、案例

  在 kbone-advanced 目录下创建 01-env 目录,本案例在这个目录下完成。

  2.1 创建 package.json

kbone高级-环境判断3

  编辑 package.json:

kbone高级-环境判断4

  安装依赖包:

kbone高级-环境判断5

  2.2 配置 webpack

  在 01-env/build 目录下创建 webpack.config.js,内容如下:

kbone高级-环境判断6

kbone高级-环境判断7

  2.3 创建 main.js

  在 01-env/src 目录下创建 main.js,内容如下:

kbone高级-环境判断8

  2.4 创建 App.vue

  在 01-env/src 目录下创建 App.vue,内容如下:

kbone高级-环境判断9

  2.5 编写入口文件 index.html

  在项目根目录下创建 index.html,内容如下:

kbone高级-环境判断10

  2.6 Web端效果预览

kbone高级-环境判断11

kbone高级-环境判断12

  2.6 创建 webpack.mp.config.js

  在 01-env/build 目录下创建 webpack.mp.config.js,内容如下:

kbone高级-环境判断13

kbone高级-环境判断14

kbone高级-环境判断15

kbone高级-环境判断16

  2.7 创建 main.mp.js

  在 01-env/src 下创建 main.mp.js 文件,内容如下:

kbone高级-环境判断17

  2.8 小程序端效果预览

kbone高级-环境判断18

kbone高级-环境判断19

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT