位置: IT常识 - 正文

TDesign小程序组件库体验(小程序navigator组件)

编辑:rootadmin
TDesign小程序组件库体验

推荐整理分享TDesign小程序组件库体验(小程序navigator组件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:小程序官方组件展示demo,小程序官方组件展示demo,小程序navigator组件,小程序cell组件,小程序navigator组件,小程序tabs组件,小程序tabs组件,小程序editor组件,内容如对您有帮助,希望把文章链接给更多的朋友!

原来小程序开发有组件库选择的问题,可以使用WeUI或者Vant。今年腾讯开源了前端的框架TDesign,我也分享了两篇使用文章。

年初分享的主要是PC端的框架,除了有PC端的框架外,最近TDesign又新出了小程序的框架,组件比较丰富,今天就带着大家体验一下。

1 创建小程序

用微信扫码登录微信开发者工具,登录之后点击+号来创建项目

创建项目时,先需要填入项目名称,选择程序存放的目录,填入appid,后端选择不使用云服务,模板的话选择Javascript-基础模板

2 微信开发者工具介绍

创建好项目之后可以看到微信开发者工具的一个界面,界面是包含几个区域 导航条有默认的各种各样的功能,预览区是我们小程序编译之后的效果,文件区域我们可以创建各种各样的文件,代码编辑区可以写代码,调试区可以显示各种调试信息。

有的开发者喜欢用vscode或者uniapp来开发小程序,我呢还是喜欢原生的工具,我们只是需要最终的结果,选哪种工具最终的结果都是一样的。

3 项目的初始化TDesign小程序组件库体验(小程序navigator组件)

我们现在使用模板是一个空白的项目,如果需要使用TDesign的,我们先需要做初始化,生成package.json文件

在调试区,切换到终端 点击新建终端 在光标的位置输入如下命令

npm init

一路按回车,完成package.json的创建

4 安装TDesign

在终端的命令行继续输入如下的命令

npm i tdesign-miniprogram -S --production

安装成功后可以在文件区域看到多了一个node_modules 按照官方文档的指引是要求做npm的构建,在导航条上找到工具,在工具下找到构建npm 构建成功后在文件区域会多了一个miniprogram_npm的文件夹

5 全局引入或者局部引入组件

我们引入这个库就是为了使用,如果全局引入,就修改app.json,用哪个组件就引入哪个组件,比如我们需要使用Button组件,按如下引入

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "usingComponents": { "t-button": "tdesign-miniprogram/button/button", "t-button-group": "tdesign-miniprogram/button-group/button-group" }, "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json"}

然后我们在index.wxml里增加按钮组件的代码,查看效果

<!--index.wxml--><view class="container"> <view class="userinfo"> <block wx:if="{{canIUseOpenData}}"> <view class="userinfo-avatar" bindtap="bindViewTap"> <open-data type="userAvatarUrl"></open-data> </view> <open-data type="userNickName"></open-data> </block> <block wx:elif="{{!hasUserInfo}}"> <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button> <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <view wx:else> 请使用1.4.4及以上版本基础库 </view> </block> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> <t-button t-class="external-class" theme="primary" block disabled="{{disabled}}">强按钮</t-button></view>

如果只是页面中使用,可以在index.json里引入,引入的原理是一样的,这样就完成了一个组件库的搭建

6 总结

我们本篇介绍了如何在小程序中使用TDesign组件库,在开发中我们总是寻找一些现成的解决方案来提高开发效率,重复造轮子也可以,前提是你造的比别人好,而且用的人也多。本篇我们就分享到这,我们下次再见。

作者简介:用了三年时间研究了微信小程序、微信云开发、微搭的技术体系,后续持续分享小程序开发的相关教程,敬请关注

本文链接地址:https://www.jiuchutong.com/zhishi/297845.html 转载请保留说明!

上一篇:nvm管理node版本(nvm for window)

下一篇:(一)ADE20K数据集(adas数据集)

  • officesuite是微软的吗

    officesuite是微软的吗

  • 慕课上的课件能导出吗(慕课里面的课件)

    慕课上的课件能导出吗(慕课里面的课件)

  • QQ怎么取消个人聊天背景(qq怎么取消个人资料)

    QQ怎么取消个人聊天背景(qq怎么取消个人资料)

  • 微信信息被拒收是因为什么(微信信息被拒收是什么意思什么原因)

    微信信息被拒收是因为什么(微信信息被拒收是什么意思什么原因)

  • 文字环绕方式在哪里(文字环绕方式在哪里找EXCEII)

    文字环绕方式在哪里(文字环绕方式在哪里找EXCEII)

  • xmax为什么手机老是发烫(苹果x max手机)

    xmax为什么手机老是发烫(苹果x max手机)

  • 苹果11来电不显示通讯录名字(苹果11来电不显示姓名)

    苹果11来电不显示通讯录名字(苹果11来电不显示姓名)

  • 闲鱼资金保护中要几天(闲鱼资金保护中怎么申诉)

    闲鱼资金保护中要几天(闲鱼资金保护中怎么申诉)

  • 微信可以绑几个健康码(微信可以绑几个电子医保卡)

    微信可以绑几个健康码(微信可以绑几个电子医保卡)

  • honor 9x如何隐藏应用(华为荣耀9如何隐藏)

    honor 9x如何隐藏应用(华为荣耀9如何隐藏)

  • 以pdf文档发送是什么意思(pdf格式发送)

    以pdf文档发送是什么意思(pdf格式发送)

  • mh182zp/a是什么型号(mh182zp/a是什么型号是那一年)

    mh182zp/a是什么型号(mh182zp/a是什么型号是那一年)

  • 手机充电电流多少正常(手机充电电流多少算正常)

    手机充电电流多少正常(手机充电电流多少算正常)

  • 鼠标底部灯不亮了是怎么回事(鼠标底部灯不亮了,可以上下滑动,但无法左右滑动)

    鼠标底部灯不亮了是怎么回事(鼠标底部灯不亮了,可以上下滑动,但无法左右滑动)

  • 学校组建的计算机网络属于(学校建校舍计划投资45万元,实际投资40万元)

    学校组建的计算机网络属于(学校建校舍计划投资45万元,实际投资40万元)

  • 小米手机什么是永恒模式(小米手机什么是解锁机)

    小米手机什么是永恒模式(小米手机什么是解锁机)

  • 手机qq怎么发聊天记录给别人(手机QQ怎么发聊天记录)

    手机qq怎么发聊天记录给别人(手机QQ怎么发聊天记录)

  • airpods续航大概多久(airpods续航多久正常)

    airpods续航大概多久(airpods续航多久正常)

  • 苹果xr怎么改铃声(苹果xr改铃声)

    苹果xr怎么改铃声(苹果xr改铃声)

  • 怎么恢复美团删除记录(怎么恢复美团删除地址)

    怎么恢复美团删除记录(怎么恢复美团删除地址)

  • 路由器显示已连接 但无法上网(路由器显示已连接到设备,但无法提供互联网连接)

    路由器显示已连接 但无法上网(路由器显示已连接到设备,但无法提供互联网连接)

  • 苹果11pro max和11pro区别(苹果11pro max和11pro的区别)

    苹果11pro max和11pro区别(苹果11pro max和11pro的区别)

  • 作业帮拍照声音在哪关(苹果手机怎么关掉作业帮拍照声音)

    作业帮拍照声音在哪关(苹果手机怎么关掉作业帮拍照声音)

  • iphone11单卡还是双卡(iphone11单卡好吗)

    iphone11单卡还是双卡(iphone11单卡好吗)

  • ps曲线调色原理(ps曲线调色原理图片)

    ps曲线调色原理(ps曲线调色原理图片)

  • ios12取消自动续费(iphone自动续费怎么取消 ios12)

    ios12取消自动续费(iphone自动续费怎么取消 ios12)

  • 华为p30全面屏设置(华为p30如何把手机变成全面屏)

    华为p30全面屏设置(华为p30如何把手机变成全面屏)

  • 苹果手机通话记录删除了怎么恢复(苹果手机通话记录怎么只有几天的)

    苹果手机通话记录删除了怎么恢复(苹果手机通话记录怎么只有几天的)

  • 小微企业税收新政
  • 小规模纳税人已过开票截止日期禁止开票怎么办
  • 购入不动产进项税额抵扣
  • 个人独资企业可以核定征收吗
  • 发票该如何打印
  • 子公司分红对合并报表的影响
  • 附加税退税申请书怎么写
  • 企业所得税汇算清缴时间
  • 没有借贷资质的公司对外放款
  • 免抵退税怎么做账
  • 存货清查的结果
  • 转账支票支付购货款填制什么凭证
  • 应纳税调增调减会计分录
  • 结转折旧费会计分录
  • 传媒公司发传单
  • 企业发生的间接生产费用应
  • 营改增各项业务销售额按照什么确定
  • 增值税多缴纳0.03怎么算
  • 长期待摊费用要设明细科目吗
  • 活动策划费属于哪一类
  • 哪些研发费用可以资本化
  • 收到的劳务费发票进什么科目
  • 股东净利润是什么
  • 用友加密狗可以拔下来么
  • 政府性基金预算收入包括
  • 顶账的固定资产怎么入账
  • 销售商品包安装如何确认收入
  • 专利代理费如何报销
  • win11重置此电脑失败
  • 冲销货款的会计分录
  • 设置系统自动更新一般通过什么窗口
  • mac怎么设置默认程序
  • 国税0申报如何网上申报
  • 农产品销售发票抵扣政策
  • pascl32.exe - pascl32是什么进程 有什么用
  • uniapp安装插件
  • HBuilderX uni-app简单实现静态登录页面(实例)
  • 企业如何避免纳税问题
  • 收到固定资产的记账凭证
  • 设备维修产生的人工费怎么开发票
  • php上传图片并显示
  • 智能优化算法可以用到哪里
  • ChatGPT等大模型的模型量化:平滑量化法
  • 研发费用如何做加计扣除
  • mysql怎么处理特殊字符数据
  • 小企业如何计提折旧
  • 公司法人怎么样才会没有责任
  • 非货币性资产交换以公允价值为基础进行计量
  • 哪些地方中国没有收复
  • 应交税费科目怎么调整
  • 质押发票
  • 民办非企业单位什么意思
  • 什么是现金等价物
  • ゆうちょ银行转账步骤
  • 建筑企业材料费能否加计扣除
  • mysql 5.7.33安装
  • sql中查询语句
  • 使用u盘安装windows10电脑识别不出来
  • ie标签页
  • windows怎么加速
  • video for windows是什么
  • linux crontab -e
  • windows右下角
  • win1021h2正式版发布日期
  • win8系统开机
  • linux退出telnet服务
  • sgbhp.exe - sgbhp是什么进程 有什么用
  • win8出现蓝屏怎么修复
  • jquery使用教程
  • linux sar文件路径
  • 批处理实现电脑登陆二次验证
  • node.js怎么样
  • 修改jquery版本号不生效
  • jquery自带的弹出框
  • js和jquery可以混用吗
  • android开发从入门到精通(项目案例版)
  • 河南工商年检网上申报
  • 江苏国税电子国税局
  • 小规模纳税人可以用专票抵扣税吗
  • 税务备案表银行留存
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设