分析uniapp入门之nvue爬坑记

前言

uni-app 是 DCloud 出品的新一代跨端框架,可以说是目前跨端数最多的框架之一了,目前支持发布到:App(Android/iOS)、H5、小程序(微信小程序/支付宝小程序/百度小程序/字节跳动小程序),目前市面上类似的框架还有:Taro(京东出品)、Megalo(网易出品)。

weex 支持的东西,在 nvue 里大多都是支持的,所以这里就不详细讲述 weex 的相关组件和 api 调用,只讲述一些在实际开发过程中遇到的一些小问题。

Hello World

开始创建第一个 nvue 页面。

目录结构:

index.nvue 代码如下:

<template>
	<div>
        <text>{{text}}</text>
    </div>
</template>
<script>
	export default {
		data() {
			return {
				text: 'Hello World'
			}
		}
	}
</script>

如此真机运行可能遇到如下错误:

造成这个问题的原因是 uni-app 项目里必须有一个 vue 的页面,新建一个 vue 页面然后重新运行就不会有问题了。

image 设置 border-radius

在 nvue 里面不能给 image 设置 border-radius,想要将矩形图案变为圆形需要在 image 外面包一层 div,代码如下:

<div style="width: 400px;height: 400px;border-radius: 400px;overflow: hidden;">
    <image style="width: 400px;height: 400px;" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"></image>
</div>

设置真实像素

在 weex 的规范里只有一个长度单位即:px,屏幕总宽度为 750px,设置长度后,weex 引擎会根据手机屏幕的宽度动态计算出实际长度,类似于 uni-app 的 upx。

但是在实际开发过程中可能不想要这样动态的长度单位,此时可以使用 weex 1.x版本里面一个长度单位:wx。这个单位就是实际像素单位,虽然 weex 文档没有提及,但目前任然是可用的,当然随着 weex 的更新,wx 也可能会不再支持。

引入外部的 css

在 App.vue 里写的公用的样式在 nvue 里是不生效,多个 nvue 想要使用公用的样式,需要引入外部的 css。

由于 weex 的限制,不能在 style 节点下使用 @import "xxx.css" 这样的方式引入外部 css,需要使用如下方式引入 css:

<style src="@/common/test.css"></style>
<style>
   .test {
        color: #E96900;
   }
</style>

需要注意的是在 <style src="@/common/test.css"></style> 节点里写样式是不生效的。

使用 ttf 字体文件

在nvue或者weex中是不能直接在css中 通过 @font-face 这样的方式引入字体文件的,需要在js中使用 dom 模块引入字体文件,可参考 weex文档:

const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
    'fontFamily': "iconfont2",
    'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});

vue 打开 nvue 时传递参数

由于 vue 打开 nvue 时不能在 url 后携带参数,只能使用 storage 的方式进行参数传递。

在 vue 页面打开 nvue

uni.setStorageSync('test', 'hello');
uni.navigateTo({
    url:"/pages/nvue/nvue"
})

在 nvue 页面获得参数,在 created 里调用 uni-app 的 api 时需要延时一段时间才能调用成功(最新版 uni-app 框架已经修复此问题,不用延时也可以调用成功)。

<script>
    export default {
        created() {
        	console.log("nvue created!");
            setTimeout(() => {
                uni.getStorage({
                	key:'test',
                    success: (res) => {
                    	console.log("获得上个页面传递的数据" + res.data)
                    }
                })
            },200)
        }
    }
</script>

仿微信朋友圈效果

在开发中,有个页面需要做到如微信朋友圈那样效果:整体列表为从上到下排列,每个列表为左右两列,左边为用户头像,右边消息内容。

在开发的时候,首先想到的是父元素使用 flex-direction: row; 让头像和内容,分别在左右展示。但是出了问题,内容区域的高度不能根据文字的长度而撑开;如果父元素使用上下排列,内容区域的高度就可以被文字所撑开。

出现问题的代码如下:

<template>
    <div style="background-color: #ccc;">
        <div class="items">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容,上下排列时候可以撑开内容。</text>
            </div>
        </div>
        <div class="items" style="flex-direction: row;">
            <div class="headImg"></div>
            <div class="rgtBox" style="flex: 1;">
                <text>左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容,左右排列时候不可以撑开内容</text>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
    }
</script>
<style>
    .items {
        background-color: #fff;
        margin-bottom: 50px;
    }
    .headImg {
        width: 100px;
        height: 100px;
        background-color: #555;
    }
    .rgtBox {
        background-color: #fff;
    }
</style>

出现这个问题应该是 weex 的 bug,左边元素设置高度后,右边若不设置高度,其最大高度为左边元素的高度。解决办法就是将头像和内容均上下排列,然后设置内容区域的 margin-left、margin-top 和 min-height 就能达到类似的效果。

代码如下:

<template>
    <div style="background-color: #ccc;flex-direction: column;">
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>一段短文本,一段短文本</text>
            </div>
        </div>
        <div class="item">
            <div class="headImg"></div>
            <div class="rgtBox">
                <text>这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本,这里是一段长文本</text>
            </div>
        </div>
    </div>
</template>

<script>
    export default {}
</script>
<style>
    .item {
        background-color: #fff;
        margin-bottom: 50px;
    }
    .headImg {
        width: 100px;
        height: 100px;
        background-color: #555;
    }
    .rgtBox {
        width: 600px;
        min-height: 100px;
        margin-left: 130px;
        margin-top: -100px;
        background-color: #fff;
    }
</style>

以上就是分析uniapp入门之nvue爬坑记的详细内容,更多关于uniapp入门之nvue爬坑记的资料请关注我们其它相关文章!

时间: 2021-06-03

uniapp实现横向滚动选择日期

本文实例为大家分享了uniapp实现横向滚动选择日期的具体代码,供大家参考,具体内容如下 1.方法封装 common.js //获取当前时间,格式YYYY-MM-DD HH:MM:SS const GetNowTime = time => { var date = time, year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours() < 10 ? &q

uniapp实现可滑动选项卡

本文实例为大家分享了uniapp实现可滑动选项卡的具体代码,供大家参考,具体内容如下 tabControl-tag.vue <template name="tabControl"> <scroll-view scroll-x="true" :style="'background-color:'+bgc+';top:'+top+'px;'" :class="fixed?'fxied':''" :scroll-l

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

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

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

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

uniapp实现可以左右滑动导航栏

本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码,供大家参考,具体内容如下 <template> <view> <home-view></home-view> <view class="content-box" :id="isScale?'content-box-too':''"> <view class="nav-head-box top-nav-fixed">

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与webview之间的相互传值的实现

1.uni-app 如何发送数据到 H5? 其实很接单.在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中: <template> <view class="advertisement" style="width: 100%;"> <web-view :src="url" @message="message"></web-view>

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

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

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()

微信小程序实现订单倒计时

本文实例为大家分享了微信小程序实现订单倒计时的具体代码,供大家参考,具体内容如下 之前在做一个有拼团功能项目的时候遇到过倒计时的问题,由于当时技术不熟在这方面耽搁了好些时间,所以这里整理出来希望能为后来人提供些许启发. 1.实现思路 求出发起拼团时间与拼团结束时间的时间差 再将时间差格式化得到我们想要的格式如: 时间每秒递减使用了 setTimeout(this.setTimeCount,1000);这个函数,让这个函数每隔一秒执行一次. 效果图: 2.实现中的难点 若是要实现单个倒计时如60s

微信小程序之发送短信倒计时功能

点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

微信小程序的注册页面包含倒计时验证码、获取用户信息

1.页面展示 2.wxml代码 <!--pages/register/register.wxml--> <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id="telphone" maxlength='11'

微信小程序实现日期格式化和倒计时

本文实例为大家分享了微信小程序实现日期格式化和倒计时的具体代码,供大家参考,具体内容如下 首先看看日期怎么格式化 第一种: Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+&q

微信小程序项目实践之验证码倒计时功能

效果如下:点击发送验证码按钮,按钮背景变色,不可点击,显示倒计时文字 首先js文件的data里面 声明一个变量用于表示当前是否可以点击,codeIsCanClick = true,  默认是可以点击的 写下界面代码: wxml文件中 <view class='centerRow'> <view class='inputLabel'>动态码:</view> <input class='inputStyle' style="flex:1 " bin

使用uni-app开发微信小程序的实现

前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color-ui,动态设置底部tab页等,详情见下文 uni-app 介绍(官网) uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台. 即使不

小程序外卖订单界面的示例代码

1.效果界面 2.涉及功能 *左侧商品类型.右侧商品可以相互控制: *商品列表加减及购物车商品加减icon消失.显示: *商品每一次加减,页面视图变化(数量.价格变化.购物车置灰): 3.贴上所有代码 1.wxml <view class="container"> <view class="index-cont"> <!-- 左边类型 --> <view class="index-left"> &l

详解使用uni-app开发微信小程序之登录模块

从微信小程序官方发布的公告中我们可获知:小程序体验版.开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作: 1.当用户未授权过,调用该接口将直接报错 2.当用户授权过,可以使用该接口获取用户信息 但在实际开发中我们可能需要弹出授权询问框,因此需要我们自己来写模拟授权弹框(主要是对<buttonopen-typ

小程序实现订单倒计时功能

最近项目遇到了 一个小问题,当订单需要支付的时候,超过指定时间,自动关闭这个订单,未到达订单结束时间时,需要显示订单还有多久关闭, 如下图: 写出的这个方法支持多个对象,看到技术群有很多人问这个问题,而没有人回答,决定把这个解决方案贡献出来(不知道算不算好的解决方案) 我的解决方案是: 后台给出订单的结束时间,然后再去请求服务器当前的时间,互相转换成时间戳,然后相减 得出的结果是 xxx毫秒 然后 / 1000 就是真正的相差时间了. JS文件 page({ data: { }, onLoad:

小程序实现短信登录倒计时

在平时的短信登录中,当发送短信验证码后会显示倒计时,那么这个倒计时如何实现呢? wxml文件 <view class='Form'> <form bindsubmit="formSubmit" bindreset="formReset" class='forms'> <view class="fidpas"> <input type="number" class="phone