寒假uniapp实习心得(一）

目前正在寒假远程实习，公司用的技术栈是uniapp，是我之前没怎么接触过的，在这段时间里，边开发边学习，遇到了很多坑，也慢慢了解到它和h5开发的区别，在这篇文章中，我将分享一些心得体会，希望对UniApp初学者有所帮助。

还有一些基础的用法在之前的文章里初识uniapp------走进小程序的大门

运行调试

开发uniapp项目用的编译器是HBuilder，它和VScode有一些不同，最重要的就是运行调试，VScode可以直接下载live server就可以了，但是在HBuilder中要自己去配置调试的环境。

这里有五种调试方式，最常用的就是浏览器和小程序模拟器，这两种方式都要去配置安装路径，切记，是.exe所在的路径而不是快捷方式的路径，如果用微信开发者工具进行调试还需要在它的安全设置里把服务端口打开，否则运行不了

当然HBuilder还提供了内置浏览器，去下载这个插件就可以在写代码的时候实时看到样式，就不用去打开浏览器和小程序模拟器了，也是一种不错的选择

不过手机模拟器调试也是非常重要的，因为很多app和小程序上的功能用其他调试功能没办法使用，最常见的就是拍照功能，我昨天写这个功能调试了半天都出不来，后面用手机调试才行，手机调试需要进入手机的开发者模式，打开usb调试功能，不同的手机方式不一样，具体的方式可以去浏览器自行搜索

路由跳转

我们在h5开发的时候路由跳转用的是vue-router，然后还要去router文件夹下面配置路由信息，在uniapp里路由的跳转有两种方式，一种是<navigator>标签,还有一种是uni.navigateTo方法，

js 复制代码

<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
	<button type="default">跳转到新页面</button>
</navigator>



<button type="default" @click="goto('/pages/about/about')">通过方法跳转到about页面</button>

methods: {
    goto(url) {
        uni.navigateTo({
            url:url
    })
 }
}

路由配置的文件在创建项目的时候就已经给你准备好了，就是pages.json,一般创建页面的时候路由信息会自动给你配置好，不用自己去写，这也算是比较人性化的一种了

内置组件

uniapp的内置组件和h5还是有很大区别的，比如nuiapp就不支持h2和span这类标签，更不要混用h2和span之类的标签，不然你会被你的上司痛批一顿，uniapp中文字的标签只有text这一种，要知道uniapp中哪些组件可以用就打个u和组件名字就可以了，比如span和div就没有，uniapp中的盒子用的是view，所以uview是有的

通过这段时间的实习，我对UniApp的开发流程和注意事项有了更深刻的理解。希望我的经验分享对UniApp初学者有所帮助，后期我也会继续和大家分享我的实习心得，欢迎大家一起交流学习