微信小程序引入Uview

这篇具有很好参考价值的文章主要介绍了微信小程序引入Uview。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.创建小程序

1.使用Hbuilder创建小程序项目,模板选空。

微信小程序引入Uview

 二.安装Uview

直接在uni-app插件市场通过uni_modules的形式进行安装,在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件,导入到对应的项目中即可

地址:Uview2.0下载地址

微信小程序引入Uview

 三.配置Uview

1.引入Uview

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

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

2. 在引入uView的全局SCSS主题文件

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

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

3.引入uView基础样式

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

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

4.运行在微信开发者工具上

找到manifest.json文件,选择微信小程序配置,填写自己微信小程序的AppID,下方勾选ES6转ES5

全部设置完就可以使用了文章来源地址https://www.toymoban.com/news/detail-411588.html

到了这里,关于微信小程序引入Uview的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • HBuilder创建uniapp默认项目导入uview(胎教)

    建议更新 我本人在没有更新插件的情况下报错了,找到了**这个大佬**解决问题,所以建议更新插件 先卸载 uni-app(Vue2)编译 再重新安装 uni-app(Vue2) 新建test项目 创建成功之后,右键项目选择在外部资源器中打开 在外部资源器中打开是防止在HBuilder的终端打开cmd权限不足等

    2024年02月07日
    浏览(27)
  • uniapp使用uview主包体积过大(面向微信小程序)

    本人的是使用Hbuilder x进行的开发uniapp转微信小程序项目 使用前:    使用后: 整个爱住~(。≧3≦)ノ⌒☆!!!  友情提示 这个压缩可能会导致你代码热更新变慢,所以你开发的时候 不上传代码的时候 把这个勾东西关掉

    2024年02月11日
    浏览(42)
  • HBuilder发行微信小程序

    首先需要完善mainifest.json中的基本配置 这个需要组测dcloud才可以获取,注册后点击重新获取就可以。 然后发行前还需要完成dcloud的信息,这个他会给你网址 点击连接完成信息填写就可以了 然后就可以发行了。 发行成功后会自动跳转微信小程序,并且预览按钮可以点击了。

    2024年03月14日
    浏览(33)
  • uniapp 微信小程序使用uview u-tabbar组件自定义tabbar

    1.在components文件下面新建TabBar.vue组件, 使用uview的u-tabbar组件进行二次封装; u-tabbar组件中value取当前匹配项的name, 一般从父组件传过来即可; 在u-tabbar-item标签内可以使用插槽 slot=\\\'inactive-icon\\\'(选中的图标)和slot=\\\'inactive-icon\\\'(未选中的图标)自定义图片样式 u-tabbar组件默认已经为i

    2024年02月13日
    浏览(48)
  • 微信小程序使用字体图标——链接引入

    目录 1.下载字体图标  1.选择需要的图标加入购物车添加到项目 2.查看项目  3.生成在线链接   4.复制生成的链接 等下放到iconfont.json中​编辑 2.引入链接 1.下载  2.生成iconfont.json文件 3. 在iconfont.json中 放入生成的链接 4.需要重新编译小程序之后在终端执行 5.在app.json中引入字

    2024年02月16日
    浏览(69)
  • uniapp中使用uview组件u-icon 编辑到微信小程序样式问题

    在微信小程序中用u-icon标签选择器才能对其设置样式,但在h5预览中u-icon{ }这样设置样式不生效,用组件的customStyle属性才生效。所以干脆对不同平台用不同写法: 同时在style标签里使用u-icon选择器写样式来作用于微信小程序中: 这样互不影响

    2024年02月16日
    浏览(35)
  • 微信小程序学习—配置HBuilder运行微信小程

    第一次接触微信小程序开发。在网上找了个项目想要运行,遇到了一些问题,记录一下运行的问题,以及解决方式,供大家参考。 遇到的报错  于是上网搜索结果 第一步 在微信小程序中打开 设置—安全设置 打开服务端口 但是我还是报错 第二步 检查HBuilder中的微信小程序运

    2024年02月13日
    浏览(34)
  • 微信小程序weui的引入及使用

    提示:这种方式引入的组件将不计入代码包的大小 微信基础库在2.2.1 以上(包含)可以直接在app.json 里面配置就可以 在使用组件的页面的 json 文件加入 usingComponents 配置字段 引用 进入小程序项目根目录,执行命令 npm init 创建 package.json 文件 注意:一开始是没有的 package.js

    2024年02月03日
    浏览(35)
  • 微信小程序使用npm引入三方包详解

    1 前言 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。 此文档要求开发者们对 npm 有一定的了解,因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm,请翻阅 官方 npm 文档 进行学习。 2 微信小程序npm环境搭建

    2024年02月11日
    浏览(31)
  • uniapp HBuilder 无法运行微信小程序的问题解决

    当在 HBuilder 中新建一个空白项目,以微信小程序运行的时候,提示以下信息且没有运行成功。 原因其实已经在错误信息中写的很明白了,就是 微信开发工具 里的 安全设置 中没有 开启对应的服务端口 。 并且也写了如何操作: 打开微信开发者工具 点击 【设置】 - 【安全设

    2024年02月12日
    浏览(30)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包