uniapp页面模板（uniapp欢迎页）

本文目录一览：

• 1、新手怎么用uniapp制作图中小程序的样式？
• 2、uniapp可以商用吗
• 3、uni-app中创建uni-app选择模板的时候不同模板之间有什么区别
• 4、uni-app 入门到精通 （二）
• 5、uniapp地图拾取中心点坐标经纬度并进行反编码
• 6、uniapp搭建

新手怎么用uniapp制作图中小程序的样式？

很多新手在开始制作小程序的时候都想快速做一个功能看起来不错的小程序，那么怎么做呢？下面小编给大家分享一下。

方法/步骤

首先大家要下载按照Hbuilder软件，点击新建下面的项目

接着项目类型里面选择uni-app，然后选择一个模板，如下图所示

然后就创建好了项目的目录，如下图所示

接着打开Hbuilder的设置界面，配置小程序开发工具的路径，如下图所示

然后打开小程序开发工具，选择安全设置

接着开启服务端口，如下图所示

接下来我们点击Hbuilder的运行菜单，选择运行到小程序模拟器的微信开发者工具上，如下图所示

最后就可以看到一个小程序就快速制作完成了，如下图所示

uniapp可以商用吗

可以免费商业。uniapp可以免费商用，图鸟 UI 是一款基于 uni-app 进行开发的?UI 框架，内含常用表单组件、信息展示组件等，并提供丰富的酷炫页面模板。作者是一个很 nice 的女孩子，优秀的?UI 设计师?/?自由开发者。目前图鸟 UI 以 uni-app 插件的方式提供，已经支持发布到?H5?/?App?和微信小程序。图鸟 UI 分为开源版本和会员版本，开源版本基于?Apache 开源协议发布，可以免费商用，会员版本 699 元终身会员，多一些页面模板。对大部分定制需求来说，开源版本是完全够用的。

uni-app中创建uni-app选择模板的时候不同模板之间有什么区别

就是模版名称描述的了

比如html5，微信小程序

看名字就大概知道

其实没有实质区别，只是初始文件和目录结构有各模式区别

项目都是可以互转的

uni-app 入门到精通 （二）

18 年时候有幸接触到 uniapp , 写了一篇 《uni-app 入门到精通》 ，由于一些原因，该方案并没有执行，该项目一系列文章也就没有再写下去，所以遭受到了许多人评论的吐槽，到如今公司项目的需求又要根据 uniapp 写 H5 嵌入到 app 中，所以想根据项目实际开发分享一下，有兴趣的伙伴可以参考和吐槽。

这一篇文章主要分享一下内容

uniapp 模板项目有两种初始化方式

由于无法舍弃 VSCode ，我们采用 vue-cli 来初始化项目， HBuilderX 大家可以参照官方文档

这种方式是可以通过 vue 脚手架命令指定模板，这个是 dcloudio 的官方提供模板

我们选择默认模板即可，

成功后我们执行

打开浏览器地址，直接运行即可。

一般刚接触前端的小伙伴可能会对 postcss 不太了解，这里简单介绍一下，

当然 PostCSS 具体使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考资料，毕竟这块知识还是挺多的就不具体展开解释了。

通常我们在写移动端时候需要做的是页面适配方案的确定， uni-app 支持的通用 css 单位包括 px、rpx ， 之前的 upx 方案已经被废弃掉，官方解释是目前市面上已经基本上支持了微信的 rpx 方案，所以 upx 中转方案已经意义不大了，不过还可以继续使用，不过已经不再推荐。

rpx 之初是由微信小程序提出一种方案，即根据宽度来进行适配以 750 宽屏幕为基准， 750rpx 恰好为屏幕宽度, uni-app 规定屏幕基准宽度 750rpx 。所以说如果你们的UI 设计以 750*1334 iphone 6/6s 为基准设计的话，你只需要将屏幕上 px 写为 rpx 即可，不用做任何换算，如果不是的话，你就需要做如下换算：

uniapp 有自己一套路由管理机制，而未采用 vue-route 方案，个人认为这套方案还是比较成熟和好用的，以及可以满足我们日常的需求:

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

2.uni.redirectTo(OBJECT)

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

3.uni.reLaunch(OBJECT)

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

注意： 如果调用了 uni.preloadPage(OBJECT)) 不会关闭，仅触发生命周期 onHide

4.uni.switchTab(OBJECT)

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

注意： 如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide

5.uni.navigateBack(OBJECT)

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

5.uni.preloadPage(OBJECT)

预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。

以上路由API 已经满足我们的需求，当然进行路由跳转的前提是我们需要在 pages.json 进行路由配置, 包括路由和具体的样式配置

而进行具体路由跳转我们需要如下，需要多加一个 /

需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候，会出现页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

uniapp 提供网络请求的 api 是 uni.request ，具体支持的请求方法可以参考官网 method 有效值

不过我们通常不会直接使用，而是进过一系列的封装以方便我们的使用，具体封装接口使用会在随根据页面数据请求一并展示。

uniapp地图拾取中心点坐标经纬度并进行反编码

准备：使用了高德地图，所以需要前往 高德开放平台 申请appkey（安卓，iOS各一个）。申请过程不做介绍。

图片：

新建页面：

页面模板中放入地图组件：

脚本中定义页面内全局变量 地图对象 ：

页面 onReady 时获取 地图对象 ：

上面用到的api，可查看 uniapp接口文档--createmapcontext

获取中心点经纬度并反编码：

有关上面用到的api，可查看 5+app的接口文档--maps

可尝试拨动地图位置，改变地图中心点位置。点击 确定 ：

uniapp搭建

1.uniapp搭建首选项是通过hbuildx去新建项目

2.如果新手可以先选择hello uni-app这个模板，里面涵盖了uniapp里的各种组件、API和框架的介绍，能够让你更快速的对uniapp有一个视觉上的认知。如果你想直接开发不需要框架里的多余文件，那你可以选择默认模板，这模板是精简版的只有几个简单的目录，当然你也可以选择uni-template或者其他模板，根据自己需要自己创建。下面是两种模板的对比

3.创建完成后就可以点击hbuilder的运行来启动项目了。

uniapp页面模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于uniapp欢迎页、uniapp页面模板的信息别忘了在易优之家进行查找喔。