专栏首页web秀uni-app: 如何高效开发?

uni-app: 如何高效开发?

前言

本文主要是讲解Uni-App开发技巧,如何快速的撸码?如何调试Uni-App?通过本文,让小伙伴们开发出优秀的Uni-App。

代码模板快速生成代码块

HBuilderX和VS Code、Sublime Text一样,都可以代码模板来快速生成代码。而HBuilderX代码块分为Tag代码块、JS代码块,如在 script 标签内输入 uShowToast 回车,会自动生成如下代码:

uni.showToast({
    title: '',
    mask: false
    duration: 1500
});

在template模板中,输入uCheckbox 回车,会自动生成如下代码:

<label>
    <checkbox :value="" /><text></text>
</label>

下面我们来看看有HBuilderX提供哪些内置Tag代码块和JS代码块。

Tag代码块

uButton

uCheckbox

uGrid:宫格,需引用uni ui

uList:列表,需引用uni ui

uListMedia

uRadio

uSwiper

...

几乎各种组件不管是内置组件还是uni ui的组件,均已封装为代码块,在HBuilderX的vue代码template区域中敲u,代码助手会提示10个代码块列表,如果没有,需要输入更详细的关键字。也可在HBuilderX菜单工具-代码块设置-vue代码块的左侧列表查阅所有。

下面输入us,查看uSwiper代码块:

除组件外,其他常用代码块包括:

viewfor:生成一段带有v-for循环结构的视图代码块 vbase:生成一段基本的vue代码结构

JS代码块

1、uRequest 请求代码模板

    uni.request({
    url: '',
    method: 'GET',
    data: {},
    success: res => {},
    fail: () => {},
    complete: () => {}
});

2、uGetLocation 获取定位代码模板

uni.getLocation({
    type: 'wgs84',
    success: res => {}
    fail: () => {},
    complete: () => {}
});

3、uShowToast 提示框代码模板

4、uShowLoading 显示loading代码模板

5、uHideLoading 隐藏loading代码模板

6、uShowModal 显示模态弹框代码模板

7、uShowActionSheet 显示操作菜单代码模板

8、uNavigateTo

9、uNavigateBack

10、uRedirectTo

11、uStartPullDownRefresh

12、uStopPullDownRefresh

13、uLogin

14、uShare

15、uPay

......

其他代码模板

1、vImport:导入文件

2、ed:export default

3、vData:输出 data(){return{}}

4、vMethod:输出 methods:{}

5、vComponents:输出 components: {}

6、ifios:iOS的平台判断

7、ifAndroid:Android的平台判断

8、iff:简单if

9、forr:for循环结构体

10、fori:for循环结构体并包含i

11、funn:函数

12、funa:匿名函数

13、rt:return true

14、clog:输出:"console.log()"

15、clogvar:增强的日志输出,可同时把变量的名字打印出来

16、varcw:输出:"var currentWebview = this.$mp.page.$getAppWebview()"

当然,如果预置代码块不满足需求的话,可以自定义代码块

自定义代码块

点菜单-工具-代码块设置,选择你要查看的语言的代码块。

打开的界面中,左侧即是预置的代码块,右侧是开发者可以自己扩展代码块的地方。

掌握这些代码块,开发快的不止一点点哦。

如何调试uni app

Chrome 调试 H5

uni-app H5调试,就和我们平常调试网页一样哦,进入 uni-app 项目,点击工具栏的运行 -> 运行到浏览器 -> 选择 ChromeF12开始调试。需要注意:Chrome调试只能保证样式一致,部分原生能力是不支持的,比如获取定位,支付等。如果不是使用HBuilderX内置浏览器调试,网络请求也是不能跨域的哦,而内置浏览器是允许跨域的,同时内置浏览器也能模拟获取定位,不过都是北京市的定位。

小程序开发工具调试

uni-app 运行到微信web开发者工具等小程序开发工具里,可在这些工具的控制台查看 console 信息,网络请求等信息等。

页面样式调试和一般的web项目一样,通过调试的箭头选中元素即可查看相应的节点和样式,如下图:

调试 js 时需要切换到 Sources 栏,选中想要调试的那个页面的js,进行调试(如果js代码是压缩过的,点击右下角的{}可格式化代码),如下图:

App调试

在HBuilderX的运行菜单里运行App,手机端的错误或console.log日志信息会直接打印到控制台。

但是需要更多功能,比如审查元素、打断点debug,则需要启动调试模式。自 HBuilderX 2.0.3+ 版本起开始支持 App 端的调试。

在 HBuilderX 中,正确运行项目: 运行 --> 运行到手机或模拟器 --> 选择设备,项目启动后,在下方的控制台选择 debug 图标:

正确打开调试窗口后,显示如下:

Elements 主要显示当前页面的组织结构,目前Elements只支持nvue。

在调试窗口控制台的 Sources 栏,可以给 js 打断点调试。

之后,在设备上进行操作,进入断点位置,可以方便我们跟踪调试代码。

提示

debug仅支持自定义组件模式。如果是非自定义组件模式,请在manifest里配置选为自定义组件模式。非自定义组件模式即将停止支持,

vue 和 nvue 页面均支持断点调试

目前仅支持 nvue 页面审查元素,vue 页面暂不支持,以及 Android 平台的 nvue 审查元素暂不支持查看 style

App端提供真机运行的console.log日志输出,运行到真机或模拟器时,不用点debug按钮,运行手机App,会在HBuilderX的控制台直接输出日志。

如果是调试App的界面和常规API,推荐编译到H5端,点HBuilderX右上角的预览,在内置浏览器里调Dom,保存后立即看到结果,调试更方便。并且H5端也支持titleNView的各种复杂设置。唯一要注意的就是css兼容性,使用太新的css在pc上预览可能正常,但低端Android上异常,具体可查询caniuse等网站。 常用的开发模式就是pc上使用内置浏览器预览调dom,运行到真机上看console.log。如果是很复杂的问题才使用debug。

vue页面也可以在微信开发者工具里调试,除了plus API,其他是一样的,微信开发者工具的查看Dom和网络和存储等调试工具相对而言更完善些。 注意:即使不发布微信小程序、只发布App,也需要安装微信开发者工具。

uni-app的App端没有5+App那种webkit remote debug,因为uni-app的js不是运行在webview里,而是独立的jscore里。

部分manifest配置,如三方sdk配置,需要打包后生效的,可以打包一个自定义运行基座。打包自定义基座后运行这个自定义基座,同样可以真机运行和debug。打包正式包将无法真机运行和debug。

总结

本文主要是讲讲Uni App开发技巧,快速撸码技巧和调试技巧,掌握这2点,相信你可以开发出优秀的Uni App。

最后,谢谢大家支持。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Node + WebSocket + Vue 聊天室创建群聊/加入群聊功能 – 第五章

    本次算是做了一个小小的专题吧,“Nodejs + WebSocket + Vue实现聊天室功能”,目前还在一步一步推进,之前已经可以一对一、一对多聊天了,今天就...

    Javanx
  • Todo List: Node + Express 搭建服务端连接Mysql – 第五章(第一节)

    万丈高楼平地起,我们的Todo List项目也是越来越健壮了。Todo List的前面4章内容都是在为Client端开发,现在架构基本ok,接下来我们搭建Ser...

    Javanx
  • Web前端 研发模式演变过程

    可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成,浏览器负责展现。基...

    Javanx
  • #0000:Talk is cheap,Show me the code.

    做IT的,会写代码的都应该听说过这句名言,中文翻译:能说算不上什么,有本事就把你的代码给我看看。这句话是Linux 的创始人 Linus Torvalds 在 ...

    崔文远TroyCui
  • 如何学习web前端做全栈开发

    现在是互联网公司的时代,人们也离不开互联网,可以说生活处处是IT。很多互联网公司如雨后春笋般发展,所以对前端开发的需求很旺盛,都是处于供不应求的情况。随便上招聘...

    千锋哈尔滨IT培训
  • 想成为一个好程序员?学学如何写作吧

    不管你是有多年编程经验的程序员,亦或是你刚刚开始学习编程,如果你在读这篇文章,那么你已经有了另一门语言的技能:英语技能。

    程序员小跃
  • 高质量代码的特征

    回想起来,我觉得我们似乎在误读Uncle Bob的Clean Code,至少我们错误地将所谓Clean与可读性代码简单地划上了等号。尤为不幸的是,在Clean ...

    张逸
  • 开发产出 - 工程师规范

    申霖
  • 2 个月的面试亲身经历告诉大家,如何进入 BAT 等大厂?

    只是因为今天在我的 Java开发交流微信群 里面分享了关于我整个面试过程的总结及经验,这些总结都已经整合到 github 去了,在短短的几天的时间里,githu...

    好好学java
  • 微信小程序 template 模板功能实现循环

    官网案例是直接用对象扩展运算符传递一些简单数据;

    疯狂的小程序

扫码关注云+社区

领取腾讯云代金券