uniapp开发小程序的经验总结

1. 新建UI项目

首先，我们的UI是基于ColorUI，当ColorUI没有的样式，就基于Uniapp自带的UI。所以项目的开始要引入这两个UI框架。
如下，新建一个uni-ui项目。

再建立一个ColorUI项目。

如果需要观看ColorUI的效果以便直到自己需要用哪些组件，可以将其运行起来，如下。

uni-ui同理。这样只要我们需要的样式都可以在这两个UI取材了。

2. 搭建自己的项目

新建一个自己的uniapp项目，建立完成后。项目结构如下。

接着先引入ColorUI样式:

  • 将ColorUI项目下的colorui目录，拷贝到自己项目的根目录下。
  • 在自己项目根目录的App.vue文件下引入两个css文件，如下
<style>
	/*每个页面公共css */
	@import "colorui/main.css";
	@import "colorui/icon.css";

</style>
  • 需要哪个样式，可以到ColorUI项目下审查元素，拷贝对应的class即可。

如果自己想要的样式ColorUI没有，则需要引入uni-ui的样式：

  • 将uni-ui项目根目录下的common复制到自己项目的根目录
  • 在App.vue目录中引入css文件

最后App.vue类似：

<style>
	/*每个页面公共css */
	@import "colorui/main.css";
	@import "colorui/icon.css";
	@import url("common/uni.css");
</style>

自此，UI项目导入完成

3. 一些基础工作

使用tabbar：可以到uniapp官网找到tabbar部分拷贝过来使用。

页面跳转、发起请求：到uniapp官网看看，使用uniapp的组件即可

如果一个页面太复杂，建议分成多个组件。在该页面目录下新建一个compoment目录，在compoment目录下新建多个组件（vue文件），如下图所示：

引入组件：如下图所示在需要用到的地方引入组件，甚至还可以传值。

4. 页面布局

这里讲一些页面布局的实用建议。

  • 元素是从上到下，独占一行的，使用标准流div布局即可
  • 如果元素是需要在一行中排列，则需要浮动float布局。但浮动布局不能精确将元素布局在容器中指定位置，所以需要定位position布局。但是这种方式需要脱离了文档流，需要各种clear清除浮动，这种方式落后了。建议使用flex布局
  • 综上，从上到下布局使用div，从左到右布局使用float和position。或者使用flex
  • 使用flex的好处很多，可以在左右布局中justify-content将元素布局到指定的位置。因此流行使用该布局。

总结

到此这篇关于uniapp开发小程序结的文章就介绍到这了,更多相关uniapp开发小程序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • uniapp微信小程序:key失效的解决方法

    uniapp 代码 <template> <view> <image v-for="(item, i) in fileList" :key="item[urlKey]" :src="item[urlKey]"></image> </view> </template> <script> export default { props: { urlKey: {defau

  • 使用 UniApp 实现小程序的微信登录功能

    1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录.则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey.OpenId 等信息[本应后台接口.但是此处使用js发送请求] 通过 openId 调用后台 Api 获取用户的信息 获取成功,则说明已经授权过了,直接登录成功 获取失败,则说明没有授权过,需要授权之后才能进行登录 用户点击页面

  • uniapp,微信小程序中使用 MQTT的问题

    最近在uniapp打包成微信小程序的项目中第一次用到了MQTT.使用比较简单,但是还是遇到了一些问题.在此记录一下. 官方文档:MQTT Github 官方MQTT测试工具:MQTTX.测试工具使用说明 MQTT的js文件:mqtt.min.js 先上一点注意事项: (1)MQTT.js 一个 MQTT 协议的客户端库,用 JavaScript 编写,可用于 Node.js 和浏览器.在 Node.js 端可以通过全局安装使用命令行连接,同时还支持 MQTT ,MQTT TLS 证书连接:值得一

  • uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果

    uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果

    前言 实现思路:通过小程序API中的触摸事件,配合CSS来实现元素的显示和隐藏.ps(也想过另一种通过监听页面滚动的方式来实现,不过效果一定很差0.0) 一.需要用到的事件touchmove.touchend 二.话不多说上代码 1.看需求,如果是整个屏幕滑动后元素发生变化,最好放在最外面的view 代码如下: <view class="container" @touchmove="handletouchstart" @touchend="handl

  • uniapp电商小程序实现订单30分钟倒计时

    本文实例为大家分享了uniapp实现订单30分钟倒计时的具体代码,供大家参考,具体内容如下 倒计时函数如下: // cm 参数是截至时间-当前时间 // 截至时间是后台返回的数据,当前时间通过new Date() 的方式进行获取 runBack(cm) { if (cm > 0) { // 如果时间是超过1分钟,则需要展示的样式是: x分x秒,如果是小于1分钟,则是 00分x秒 cm > 60000 ? (this.rocallTime = (new Date(cm).getMinutes()

  • uniapp微信小程序实现一个页面多个倒计时

    本文实例为大家分享了uniapp实现一个页面多个倒计时的具体代码,供大家参考,具体内容如下 设计图(需求) 在这里插入图片描述 结构 <view class="group-list" v-for="item in message" :key="item.productId"> <view class="group-img" @click="navTo"> <image :src

  • uniapp开发小程序的经验总结

    uniapp开发小程序的经验总结

    1. 新建UI项目 首先,我们的UI是基于ColorUI,当ColorUI没有的样式,就基于Uniapp自带的UI.所以项目的开始要引入这两个UI框架. 如下,新建一个uni-ui项目. 再建立一个ColorUI项目. 如果需要观看ColorUI的效果以便直到自己需要用哪些组件,可以将其运行起来,如下. uni-ui同理.这样只要我们需要的样式都可以在这两个UI取材了. 2. 搭建自己的项目 新建一个自己的uniapp项目,建立完成后.项目结构如下. 接着先引入ColorUI样式: 将Color

  • uniapp开发小程序实现全局悬浮按钮的代码

    uniapp开发小程序实现全局悬浮按钮的代码

    目录 看效果 须知: 1.uni.getSystemInfoSync()获取手机的信息接口 2.uni.createSelectorQuery().in(this) 3.touchmove滑动事件 取出存储的值 赋值 全局注册组件 看效果 这是一个全局的按钮,可以换成图片,自己写样式,每个页面都有: 须知: 1.uni.getSystemInfoSync()获取手机的信息接口 可以拿到手机屏幕的宽高 2.uni.createSelectorQuery().in(this) uniapp中式没有w

  • 微信小程序使用uni-app开发小程序及部分功能实现详解

    微信小程序使用uni-app开发小程序及部分功能实现详解

    目录 一.uni-app 1.简介 2.开发工具 3.新建 uni-app项目 4.把项目运行到微信开发者工具 二.实现tabBar效果 1.创建tabBar页面 2.配置tabBar 三.配置网络请求 1.依照官网提示安装.导入.使用 2.实战 四.uni-app 里面小程序分包 1.创建分包目录 2.在 pages.json 文件中配置 3.创建分包页面 五.公用方法封装 六.搜索功能 1.搜索组件 2.搜索建议实现 3.本地存储 4.过滤器 七.上拉加载.下拉刷新 1.上拉加载 2.下拉刷

  • Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果

    Taro 就是可以用 React 语法写小程序的框架,拥有多端转换能力,一套代码可编译为微信小程序.百度小程序.支付宝小程序.H5.RN等 摘要: 年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到对应的插件,相关博客也特别少,所以没做就搁置下来了. 趁这段时间相对来说比较富裕,于是乎在网上也搜索了一下,发现确实很少,但是有人提到可以用小程序可拖动组件m

  • Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码

    Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码

    Taro 就是可以用 React 语法写小程序的框架,拥有多端转换能力,一套代码可编译为微信小程序.百度小程序.支付宝小程序.H5.RN等 摘要: 年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到对应的插件,相关博客也特别少,所以没做就搁置下来了. 趁这段时间相对来说比较富裕,于是乎在网上也搜索了一下,发现确实很少,但是有人提到可以用小程序可拖动组件m

  • uniapp微信小程序自定义导航栏的全过程

    uniapp微信小程序自定义导航栏的全过程

    目录 前言 那么标题栏的高度我们怎么获取呢? 献上源码: 组件使用: 效果图: 总结 前言 相信很多小伙伴在使用uniapp进行多端开发的时候呢,在面对一些奇葩的业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这个时候就需要我们自己自定义导航栏使用啦. 当然uniapp也给我们提供了很多的自定义导航栏的插件供大家使用,今天也给大家分享一个我自己写的导航栏啦,希望大家多多指点 首先我们在自定义导航栏的时候,我们需要知道头部的导航栏有哪几部分组成,那么我们以微信小程序

  • uniapp微信小程序获取当前定位城市信息的实例代码

    uniapp微信小程序获取当前定位城市信息的实例代码

    目录 一.事先准备 二.正式代码使用 补充:UNIAPP获取当前城市和坐标 总结 一.事先准备 此处用的是腾讯地图的jdk 1.在腾讯地图开发上申请key 2. WebServiceAPI选择签名校验获取SK 3. uniapp上勾选位置接口 4.在腾讯地图上下载微信小程序javaScript SDK放入项目里 二.正式代码使用 提示:可能会出现引入jdk时报错 解决方法: *把jdk最后一行暴漏方式改为export default 引入时用import就行了* // 1.首先在需要用到的地方引

  • 关于uniapp微信小程序左上角返回按钮的监听详解

    关于uniapp微信小程序左上角返回按钮的监听详解

    目录 项目场景: 问题描述: 原因分析: 解决方案一: 解决方案二: 结语 项目场景: uni-app 开发微信小程序,界面中点击左上角的返回按钮或者是系统自带的虚拟返回操作,返回前监听用户是否在页面内进行了相应操作,如果有则进行提示(提示用户是否确定要返回),如果没有则直接返回. 问题描述: uni-app 页面生命周期中有 onBackPress ,不过不支持微信小程序.翻看微信小程序官方文档,并未发现可以监听到左上角返回按钮的事件.查阅相关技术文档,确认微信小程序现阶段并没有提供监听左上角

  • uni-app制作小程序实现左右菜单联动效果

    uni-app制作小程序实现左右菜单联动效果

    目录 前言 一.示意图 二.实现步骤与思路讲解 1.静态页面的布局 2.模拟数据格式 3.左侧菜单的点击效果 4.右侧菜单的联动效果 三.具体实现代码 1.页面结构 2.相关样式 3.业务逻辑部分 前言 今天写出了一个新的小玩意儿,个人认为实现思路与方法还算值得学习,在这里分享给大家! 一.示意图 示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的. 二.实现步骤与思路讲解 1.静态页面的布局 页面的布局——在实现具体功能之前,我们就要考虑所要实现的具体功能是

随机推荐