uniapp初体验———uView组件库的使用与钉钉小程序的运行

这篇具有很好参考价值的文章主要介绍了uniapp初体验———uView组件库的使用与钉钉小程序的运行。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

            这周学长给了我一个校企合作的项目,要求是用uniapp开发,最终打包成钉钉小程序,不过我并不会uniapp,也是学了一段时间,开始写项目,中间也遇到过很多问题,比如开发者工具还有如何运行到开发者工具以及组件库的使用,这些虽然都是一些基础的问题,但是对于我一个初学者来说还是很有必要总结的。

开发者工具安装

不同于我们写h5,可以直接在浏览器中运行,写小程序的话,需要安装对应的小程序开发工具,这次我写的是钉钉小程序,它的开发者工具的连接是:发者工具,安装之后运行可能需要你注册什么的,按照指示走就行

运行小程序

我们写uniapp更多的是用Hbuilder写的,首先创建一个uniapp项目
uniapp钉钉小程序注意事项,总结,小程序,uni-app,钉钉
新建完项目,我们会发现运行中并没有运行钉钉的选项,这就需要我们另外配置一下,新建的项目并没有package.json文件,我们可以在项目跟目录运行npn init -y 来初始化项目,生成一个package.json文件
uniapp钉钉小程序注意事项,总结,小程序,uni-app,钉钉
之后在package.json加入一个配置

"uni-app": {
        "scripts": {
            "mp-dingtalk": { 
                "title":"钉钉小程序", 
                "env": { 
                    "UNI_PLATFORM": "mp-alipay" 
                },
                "define": { 
                    "MP-DINGTALK": true 
                }
            }
        }
    }

这里的title是我们自定义的一个项目名称
uniapp钉钉小程序注意事项,总结,小程序,uni-app,钉钉
加入这个配置之后我们就会发现运行中会多一个选项
uniapp钉钉小程序注意事项,总结,小程序,uni-app,钉钉
我们点击运行就可以,之后它就会自动打包,并给我们一个可以小程序运行的路径
uniapp钉钉小程序注意事项,总结,小程序,uni-app,钉钉
即我们的项目目录的unpackage/dist/dev/map-alipay文件夹,随后在开发者工具中打开这个文件夹,之后就会开发者工具会自动编译
uniapp钉钉小程序注意事项,总结,小程序,uni-app,钉钉

配置uView组件库的使用
1. 安装
npm install uview-ui@2.0.31
2.配置

main.js配置

// main.js,注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)

pages.json配置
加入一行这个就行

"easycom": {
	"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},

uniapp钉钉小程序注意事项,总结,小程序,uni-app,钉钉
引入样式
在uni.scss中加入

@import 'uview-ui/theme.scss';

在App.vue中加入

@import 'uview-ui/theme.scss';

uniapp钉钉小程序注意事项,总结,小程序,uni-app,钉钉
别忘了指定lang为scss
之后我们随便用一个组件看是否运行成功
我们在index.vue中使用button组件,可以出现下边的结果,就表示我们配置成功了
uniapp钉钉小程序注意事项,总结,小程序,uni-app,钉钉

注意

上边我们是直接将lang改为scss,这个是因为我Hbuilder安装了scss插件,如果报错的话,可以到Hbuilder的插件市场去下载

总结

虽然uniapp语法和Vue一样,只不过新增了一些api和修改了一部分api,但是刚上手还是一头雾水,有些写Vue项目的一些思路,放到uniapp总感觉不太好,有些原本写项目的思路放到这里就得思考一下,之后还是要多摸索一下,在不断的试错中逐步成长。
保持忙碌,心无旁骛,下周继续努力吧!!!文章来源地址https://www.toymoban.com/news/detail-627632.html

到了这里,关于uniapp初体验———uView组件库的使用与钉钉小程序的运行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp运行钉钉小程序

    因项目原因,公司需要在钉钉里面开发小程序。之前用uniapp开发过app,H5,小程序。还真没尝试过钉钉小程序,今天就简单的记录下uniapp运行钉钉小程序中的过程。 在项目目录新建package.json文件,在文件中添加如下代码: 这样在项目目录中unpackage文件下生成支付宝的项目文件

    2024年04月25日
    浏览(40)
  • uniapp开发笔记----配置钉钉小程序

    接上一章之后,我想要把项目配置成钉钉小程序 官方文档点击这里 1. 项目根目录添加package.json文件 2. 之后点击运行就可以看到已经添加了钉钉小程序 3. 如果首次使用需要配置 点击运行之后会跳转到配置页面,滑块最后便可以快速选中工具地址

    2024年04月12日
    浏览(35)
  • uniapp生成钉钉小程序梳理(整理)

    uniapp官网:处理微信小程序和钉钉小程序等小程序代码 我是页面 // #ifdef MP-ALIPAY var _that = this; //js里面处理兼容 // #endif uni-app开发多端之钉钉小程序-其他博主文章 钉钉小程序免登录授权-其他博主文章 服务器出口–配置接口地址–: 配置完以后会展示出来您配置的地址:(注

    2024年02月11日
    浏览(37)
  • uni-app编译成钉钉小程序,uViewUI组件样式失效,自定义组件样式失效

    公司项目需要把原本用 uinapp 开发的微信小程序想要在钉钉上也能使用,然后就打算用uniapp编译成钉钉小程序,看看是否有坑,不试不知道,一试吓一跳,官方没有提供钉钉的编译方式,按照网上文章的配置编译成钉钉小程序后,初步发现, uView-ui的icon没啦 ,然后样式和布局

    2024年02月11日
    浏览(55)
  • 使用HBuilder运行钉钉小程序

    1,创建package.json文件夹,添加以下代码 2,点击运行按钮,就可以打开了 , 查看控制台,在小程序开发者工具中进行要导入的路径  

    2024年02月16日
    浏览(66)
  • uni-app 解决钉钉小程序日期组件uni-datetime-picker不兼容ios问题

    最近在使用uni-app开发 钉钉小程序 ,遇到一个ios的兼容性问题 uni-datetime-picker 组件在模拟器上可以使用,在真机上不生效问题 就是自定义一个 view 然后通过click事件触发dd.datePicker。 在优化一下自定义的日期组件的样式 样式跟uni-ui的 uni-datetime-picker 组件样式一样。

    2024年02月03日
    浏览(66)
  • uniapp中uview组件库TopTips 顶部提示使用方法

    目录 #平台差异说明 #基本使用 #自定义导航栏使用本组件的问题 #主题设置 #显示时间设置 #API #Methods #Props 该组件一般用于页面顶部向下滑出一个提示,尔后自动收起的场景。 #平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √

    2024年01月19日
    浏览(52)
  • uniapp中uview组件库Toast 消息提示 的使用方法

    目录 #基本使用 #配置toast主题 #toast结束跳转URL #API #Props #Params #Methods 此组件表现形式类似uni的 uni.showToast API,但也有不同的地方,具体表现在: uView的 toast 有5种主题可选 可以配置toast结束后,跳转相应URL 目前没有加载中的状态,请用uni的 uni.showLoading ,这个需求uni已经做得

    2024年01月20日
    浏览(60)
  • uniapp中uview组件库丰富的ActionSheet 操作菜单使用方法

    目录 #平台差异说明 #基本使用 #配置顶部的提示信息和底部取消按钮 #如何知道点了第几项 #API #Props #Event 本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。 本组件功能类似于uni的 uni.showActionSheet API,配置更加灵活,所有平台都表现一致。 #平台差异说明 App H5 微

    2024年01月22日
    浏览(44)
  • uniapp中uview组件库丰富的CountTo 数字滚动使用方法

    目录 #平台差异说明 #基本使用 #设置滚动相关参数 #是否显示小数位 #千分位分隔符 #滚动执行的时机 #API #Props #Methods #Event 该组件一般用于需要滚动数字到某一个值的场景,目标要求是一个递增的值。 注意 如果给组件的父元素设置 text-align: center 想让数字水平居中,可能是由

    2024年02月02日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包