当前位置: 首页 > news >正文

uniapp开发钉钉小程序流程

下载开发工具

1、小程序开发工具

登录钉钉开发平台,根据自己的需求下载合适的版本,我这里下载的是Windows (64位)版本

小程序开发工具 - 钉钉开放平台

2、HBuilder X 

HBuilderX-高效极客技巧

新建项目及相关配置

新建项目

在HBuilder X中新建一个uniapp项目,使用默认模板,Vue版本根据自己的需求选择

配置小程序开发工具路径

在项目根目录下新建package.json配置文件,用来启动钉钉小程序开发者工具

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

按上面配置好后就能看到运行-钉钉小程序了

运行好后会自动启动小程序开发工具,有时也会启动失败,需要手动打开。如果是第一次打开小程序开发工具,需要自己选择项目(根目录下-unpackage-dist-dev-mp-alipay),如果不是首次打开直接选择历史项目即可,等待编译完成。

钉钉小程序创建及配置

打开钉钉开放平台,用自己的账号选择组织登录钉钉小程序后台

钉钉开放平台

创建小程序

创建好小程序后回到小程序开发者工具,关联小程序

引入uView组件

安装依赖

npm install uview-ui@2.0.31

在main.js中,引入并使用uView的JS库,注意这两行放在 import Vue 之后

import uView from "uview-ui";
Vue.use(uView);

在项目根目录的uni.scss中引入此文件

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

在App.vue样式首行的位置引入,注意给style标签加入lang="scss"属性

<style lang="scss">/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */@import "uview-ui/index.scss";
</style>

配置easycom组件模式,在pages.json设置

{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},   // 此为本身已有的内容"pages": [// ......]
}

 如果出现scss方面的报错,可以重新安装下sass

// 安装sass
npm i sass -D// 安装sass-loader,注意需要版本10,否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

这世界很喧嚣,做你自己就好

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 从零开始学习cartographer源码 | 02.cartographer_ros—node_main.cc
  • 智能听诊器:宠物健康监测的革新者
  • 视频压缩文件太大了怎么缩小?怎么压缩视频大小?视频压缩方法:10个!(宝藏)
  • Android TabLayout+ViewPager2如何优雅的实现联动详解
  • 网页HTTP协议 get请求和post请求区别?(HTTP中Get、Post、Put与Delete的区别)(HTTP请求方法、HTTP请求方式、HTTP方法)
  • 解决npm install(‘proxy‘ config is set properly. See: ‘npm help config‘)失败问题
  • 【虚幻引擎】C++网络通信TCP和HTTP实战开发全流程,以接入科大讯飞星火大模型和文心一言千帆大模型为案例讲解
  • 防范UDP Flood攻击的策略与实践
  • gitlab新建仓库
  • 安防视频监控/视频汇聚EasyCVR平台浏览器http可以播放,https不能播放,如何解决?
  • iPhone手机上备忘录怎么设置字数显示
  • Elasticsearch(ES)集群监控
  • 部署k8s 1.28.9版本
  • axios(ajax请求库)
  • 介绍 Elasticsearch 中的 Learning to Tank - 学习排名
  • $translatePartialLoader加载失败及解决方式
  • .pyc 想到的一些问题
  • 03Go 类型总结
  • input的行数自动增减
  • JavaScript HTML DOM
  • Javascript基础之Array数组API
  • JDK9: 集成 Jshell 和 Maven 项目.
  • Node + FFmpeg 实现Canvas动画导出视频
  • Redis 懒删除(lazy free)简史
  • RxJS 实现摩斯密码(Morse) 【内附脑图】
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • Vue源码解析(二)Vue的双向绑定讲解及实现
  • 持续集成与持续部署宝典Part 2:创建持续集成流水线
  • 日剧·日综资源集合(建议收藏)
  • 新海诚画集[秒速5センチメートル:樱花抄·春]
  • ​linux启动进程的方式
  • ​zookeeper集群配置与启动
  • (4)事件处理——(7)简单事件(Simple events)
  • (Arcgis)Python编程批量将HDF5文件转换为TIFF格式并应用地理转换和投影信息
  • (C++20) consteval立即函数
  • (第61天)多租户架构(CDB/PDB)
  • (二)hibernate配置管理
  • (附源码)springboot金融新闻信息服务系统 毕业设计651450
  • (附源码)ssm考试题库管理系统 毕业设计 069043
  • (附源码)基于SpringBoot和Vue的厨到家服务平台的设计与实现 毕业设计 063133
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (论文阅读笔记)Network planning with deep reinforcement learning
  • (十)【Jmeter】线程(Threads(Users))之jp@gc - Stepping Thread Group (deprecated)
  • (十六)、把镜像推送到私有化 Docker 仓库
  • (完整代码)R语言中利用SVM-RFE机器学习算法筛选关键因子
  • (循环依赖问题)学习spring的第九天
  • (转)EXC_BREAKPOINT僵尸错误
  • (转)LINQ之路
  • **登录+JWT+异常处理+拦截器+ThreadLocal-开发思想与代码实现**
  • .net framework4与其client profile版本的区别
  • .net 获取url的方法
  • .net 设置默认首页
  • .NET/C# 使用 #if 和 Conditional 特性来按条件编译代码的不同原理和适用场景
  • ??在JSP中,java和JavaScript如何交互?
  • @RequestMapping-占位符映射