精华内容
下载资源
问答
  • 主要介绍了微信小程序 导入图标实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要给大家介绍了关于微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量、可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式。Vant Weapp组件库官方文档 以下是微信小程序导入Vant Weapp的步骤...

    超详细!微信小程序导入Vant Weapp组件库

    Vant Wepp组件库轻量、可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式。

    Vant Weapp组件库官方文档–请用电脑查看哦

    以下是微信小程序导入Vant Weapp组件库的步骤:

    需要注意的是,导入Vant Weapp需要npm支持,也即需要安装npm包。如果微信小程序pages目录下没有package.json文件,如下图所示:
    在这里插入图片描述
    此时安装npm 包会失败,这时需要先运行npm init命令,具体过程如下:

    1. 鼠标右击pages目录,选择最后一项打开终端
      在这里插入图片描述
      在终端输入 npm init 命令后一直按回车,直至生成package.json文件。

    2. 接着继续输入 npm install 命令并按回车,即可成功安装npm包。
      在这里插入图片描述

    3. 然后在终端中继续输入命令 npm i @vant/weapp -S --production 即可安装vant/weapp组件库。
      在这里插入图片描述

    4. 我们回到资源管理器目录,将app.json文件中的 “style”: “v2” 去掉。
      在这里插入图片描述

    5. 并在 project.config.json 文件内添加如下配置:

    {
      ...
      "setting": {
        ...
        "packNpmManually": true,
        "packNpmRelationList": [
          {
            "packageJsonPath": "./package.json",
            "miniprogramNpmDistDir": "./miniprogram/"
          }
        ]
      }
    }
    
    1. 接着点击开发者工具中的菜单栏:工具 --> 构建 npm
      在这里插入图片描述
      并在小程序右侧,详情 --> 本地设置中,勾选上“使用npm模块”。
      在这里插入图片描述
      即可生成miniprogram_npm文件。由于node_modules文件的内容与miniprogram_npm文件的重复,此时我们可以删除node_modules文件以减小内存,之后也不会影响Vant Weapp组件的使用。
      在这里插入图片描述

    2. 如果一直按照上述步骤进行,没有做其他改动的话,按照以下步骤即可成功使用Vant Weapp组件:

    这里以按钮组件为例:
    在index.json文件里写如下代码:

    {
      "usingComponents": {
        "van-button": "@vant/weapp/button/index"
      }
    }
    

    在index.wxml文件里写如下代码:

    <van-button type="primary">按钮</van-button>
    

    即可成功显示Vant Weapp的按钮组件啦(✪▽✪)

    在这里插入图片描述

    到这里就结束啦,有问题可以在评论区里交流哦,本人看到的话会回复哒,感谢您的支持/玫瑰~

    展开全文
  • 外卖小程序源码有后台程序,带有数据库,带有安装指南。 附带微信小程序导入上传详细图文文档教程。
  • 微信小程序导入 字体图标 在微信小程序中使用IconFont阿里巴巴矢量图标库的字体图标 首先在该网站下载好对应的字体图标 找到该文件 删除多余的兼容性处理的代码 最后得到的文件就是目标文件 将文件拷贝到微信小...

    微信小程序导入 字体图标

    1. 导入到本地
    1. 在微信小程序中使用IconFont阿里巴巴矢量图标库的字体图标

    2. 首先在该网站下载好对应的字体图标

    3. 找到该文件在这里插入图片描述

    4. 删除多余的兼容性处理的代码
      在这里插入图片描述
      在这里插入图片描述
      最后得到的文件就是目标文件
      在这里插入图片描述
      将文件拷贝到微信小程序项目中,之后修改文件的后缀为.wxss

    5. 最后导入到app.wxss作为全局的字体图标
      在这里插入图片描述

    6. 如果在使用了自定义的组件需要在组件中设置addGlobalClass: true属性或者在自定义组件的wxss中重新导入iconfont.wxss文件 官方说明

      Component({
      	options: {
      		addGlobalClass: true
      	}
      })
      
    2. 使用线上地址导入
    1. 首先选择线上地址
      在这里插入图片描述
    2. 将生成的连接复制到浏览器地址中
      在这里插入图片描述
      在这里插入图片描述
    3. 选中所有代码,在小程序中新建一个iconfont.wxss文件
    @font-face {font-family: "iconfont";
      src: url('//at.alicdn.com/t/font_1746725_sczh984tkd.eot?t=1586505428034'); /* IE9 */
      src: url('//at.alicdn.com/t/font_1746725_sczh984tkd.eot?t=1586505428034#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABnAAAAJ9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp4gQMBNgIkAwgLBgAEIAWEbQcyG6sFyK6wKcO9SJGmbEBxhp3Rcwd1w+Ejgmi/3+y7+4pJUm8klSSayCQapUCCUiiZ0oniJbyrudz/L5BQvOOfZZEVQmAv4ctsNoXxnQpD9oUrCFNZRcK0wlXytDOKwte6CLIsziTLXpAPX7B0IDPY+bpymBpbAtSCF+C/T9w7/RPog7QeUI570ViTJnUBdXEgBbgXtsnKJPGGsQte4HkCTUOKcruzy2vQJrOnBeLWcwxoK/hlmaXqQrVhbRZPKurFQ/ECj9H341892ihUErvi5GbGhvGvCycjuZLrgBAgoM0VJCwAmbhojB8pCMYVNONNxsCxSoMvXw5s4qhmwf46u7gVDEDJM0k92aOmCnisvkaBxUkPIEb1+tXpdGfzpjdqblzvideOLksl61uXdbG6/TM/erQYu4e6nroHXyMz+18fbi0GGYDev1VP1C8sd/U82Dx2hHGA8tRIAnII3sbzf9ghv+owg9d7UDShPEMaAVDfqyP4O9KBLdmQ29Yia9LGzsLoWauamihhd7ePqYa+W0mHur4JzprBDEndBJnZBVS0WEJV3Qaa5s1tbtGDFURuYM45QOh0i0K7FySdnsnMvqOi3yeqOqOApqtAe7aYCq9DMRlCNppn6Fk6Vq5dOuLSFXKy0OC8POJtEKdeCGvlajk1RzHxEgvSY6cuolCxjnAWXEZhqDFh7ZMlZVckGaxUVNObypaOoMMORgyC2JDpDPJYtJgKuouOyudXEEcmZOCOprr4BsJS3uCopqw6gJzTxIOaHuWa1DFHnRAKUpgWQbNgFAmFNJQ0j/IRiyhzJ0QTgypOOzVUU95eF/3dHmiyjUU4w5P6naszy4gdAA==') format('woff2'),
      url('//at.alicdn.com/t/font_1746725_sczh984tkd.woff?t=1586505428034') format('woff'),
      url('//at.alicdn.com/t/font_1746725_sczh984tkd.ttf?t=1586505428034') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('//at.alicdn.com/t/font_1746725_sczh984tkd.svg?t=1586505428034#iconfont') format('svg'); /* iOS 4.1- */
    }
    
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-shoucang:before {
      content: "\e687";
    }
    
    
    1. 使用,和之前的使用方式一样
    展开全文
  • 微信小程序导入Vant-Weapp组件库及出错处理 一、下载Node.js* 链接:https://nodejs.org/en/ 推荐选择LST的8.0以上版本,下载安装即可,安装完成后可以进行验证 cmd打开终端,输入vant-v出现对应版本即为安装...

    微信小程序导入Vant-Weapp组件库及出错处理

    一、下载Node.js*

    链接:https://nodejs.org/en/
    推荐选择LST的8.0以上版本,下载安装即可,安装完成后可以进行验证
    cmd打开终端,输入vant-v出现对应版本即为安装成功,也可输入npm -v查看对应的npm版本
    在这里插入图片描述

    **

    二、在微信开发工具做对应操作

    **
    这里用的是有赞的Vant Weapp
    在这里插入图片描述链接:https://youzan.github.io/vant-weapp/#/intro 后续可根据开发指南进行操作

    三、安装Vant组件库

    选中miniprogram文件,右键选择在终端打开,输入 npm i vant-weapp -S --production 进行安装
    安装完成后,在微信开发者工具窗口,选择“工具”->“构建npm",构建成功后,在miniprogram下会出现miniprogram_npm文件夹,对应的下面的就是vant组件库

    在这里插入图片描述
    选择微信开发工具的详情
    在这里插入图片描述
    勾选”使用npm模块“选项,才算完成
    在这里插入图片描述

    四、测试安装是否成功

    比如要在pagës/indeks/indeks里添加一个组件库里的button
    在index.json中加入代码

    在这里插入图片描述
    修改上述路径,最终代码为:
    “usingComponents”: {
    “van-button”: “vant-weapp//button”
    }

    再在index.wxml中加入代码
    在这里插入图片描述
    如加入一个危险按钮
    危险按钮
    按钮编译显示成功则安装成功
    在这里插入图片描述

    五、可能错误

    可能报如下两个错误
    1、jsEnginScriptError
    Component is not found in path “pages/help/vant-weapp/dist/button” (using by “pages/help/help”)
    Error: Component is not found in path “pages/help/vant-weapp/dist/button” (using by “pages/help/help”)
    在这里插入图片描述
    2、thirdScriptError sdk uncaught third Error module “miniprogram_npm/vant-weapp/picker/shared” is not defined Error: module “miniprogram_npm/vant-weapp/picker/shared” is not defined at require …

    可能是安装错误,可以手动删除miniprogram_npm后重新安装,再次尝试,可能还会有第二个错误,进入项目文件夹下,将miniprogram下的node_modules里的vant-weapp下的dist复制到miniprogram_npm的vant-weapp下,问题解决。

    展开全文
  • 微信小程序导入demon

    2019-01-28 17:09:59
    本文章只单纯讲解如何导入现有demo,让新手快速上手...其实对于微信小程序开发还是比较简单的,对于编码能力要求并不高; 难的是对于各种样式的设计、以及小程序产品的定位,毕竟这纯粹属于应用开发,和系统无关; ...

    本文章只单纯讲解如何导入现有demo,让新手快速上手开发,了解工程;

    可以到这个地址下载现成的demo,每个demo都带有效果图;

    https://download.csdn.net/download/ff_gogo/10649421

     

    其实对于微信小程序开发还是比较简单的,对于编码能力要求并不高;

    难的是对于各种样式的设计、以及小程序产品的定位,毕竟这纯粹属于应用开发,和系统无关;

    当然这回归到了设计领域。

    1、 注册,获取ID

    登录腾讯公众平台官网:https://mp.weixin.qq.com/ 根据提示进行注册账号;

    然后登录,查看自己的小程序ID:

     

    2、下载“微信开发者工具”客户端

    搜索“”“微信web开发者工具”,进入官网,下载开发客户端并安装;

     

    3、导入demon

    打开“微信web开发者工具”,

    使用微信扫码登录,选择

    选择右下角的+号:

     

     

    项目目录:为本地demon所在目录,有app.json的源码位置,

    AppID:为第一步注册的id,或使用测试号/小游戏

    项目名称:自定义

    点击确定后,会在项目目录下生成项目文件project.config.json。

     

    4、编译运行程序

    编译:可以在电脑屏幕端模拟出效果

    预览:生成二维码,微信扫描,手机端模拟

     

    展开全文
  • 微信小程序 导入地址

    2021-07-27 08:45:52
    index.wxml <view class="add-address" bindtap="addAddress"> <image class="add-img" src=""></image>新增地址 </view> <view class="add-address" ...导入微信地址 </vie
  • 微信小程序导入已有项目

    万次阅读 2018-06-13 16:51:15
    选择“小程序项目”:3.会出现管理项目,和一个+号:在管理项目中有个“新增”,也可以点击+号:4.会出现新增页面,选择项目目录,填入项目名称以及appId5.可以选择无appId点击确认,就将项目导入成功了。注:需要...
  • 微信小程序导入微信聊天记录文件

    千次阅读 2019-02-01 19:56:00
    最近看了篇文章https://mp.weixin.qq.com/s/6SGW87jeTNbT1rynCHr7GA了解到微信小程序可以将微信聊天记录里面的文件导入到小程序中使用,如下图,具体可到腾讯文档小程序中体验下。 没有经常关注小程序文档更新的...
  • 微信小程序导入VantUI踩坑实录

    千次阅读 2018-12-05 22:08:38
    最近在学习微信小程序的使用,腾讯提供的原生控件已经可以满足大部分需求,但是目前很多效果以及控件没有办法满足当前需求,所以引入第三方就显得十分必要了。我这里引入的是第三方VantUI。在用vue写移动web的时候,...
  • 微信小程序使用npm包 环境:node.js 一、初始化npm环境 npm init 二、安装npm包 这里以安装vant-weapp为例: npm i vant-weapp -S --production 三、构建npm包 1.在微信开发者工具中勾选使用npm模块 2.在菜单栏...
  • 导入</view> /** * 导入 */ uploadData() { const that=this wx.chooseMessageFile({ count: 1, type: 'file', success(res) { console.log(res.tempFiles[0]) const path = res.
  • 网上查了很多文章,都是说导入外部https链接, uni.loadFontFace({ family: "you", source: 'url("https:xxxxxxx.ttf")', global: true, success() { console.log("success") }, fail(err) { console.log...
  • 下载完成之后找到dist文件夹放到微信小程序根目录下按需引入即可 路径设置: "usingComponents": { "van-button": "/path/to/vant-weapp/dist/button/index" } 里面的"/path/to/vant-weapp/dist"的路径根据...
  • API 安全码: 在应用功能设置,安全验证,API安全码自己设置 域名配置 在微信服务器域名添加 最后哪个页面要调用就在xxx.js调用就可以了 var Bmob = require('../../utils/bmob.js'); 点击事件下测试一下 let params...
  • 无语,全乱码了 解决办法: 1.先把excel文件另存为csv文件,注意!!!并不是直接改后缀名。 2.把csv文件修改后缀名为txt文件 3.再把txt文件另存为utf-8的编码 ...5.最后再导入数据库即可 over ...
  • 网上找了个代码 导入小程序 结果显示appJSON["tabBar"][1]["pagePath"] "pages/detail/index" 需在 pages 数组中 ![图片说明](https://img-ask.csdn.net/upload/201912/02/1575266906_377220.png)!![图片说明]...
  • 导入外部js: const app = require('../common'); 导入外部css: @import '../common.wxss';
  • 解决方法:重新启动云开发窗口或清空缓存,重启小程序。 原因2:小概率跟版本问题有关,尽量下载版本较高的稳定版的微信开发者攻击。(概率很低) 解决方法:去官网下载较高的稳定版 2、如果自己新建txt文件,在里面...
  • 成功引入按钮 步骤: ps必须都做到不然都会报错,已经踩坑 首先对项目文件初始化 npm init -y npm install ...npm i @vant/weapp -S --production ...然后右上角详情,本地设置,勾选npm模块 ... "van-button": ...
  • 我们首先要找到自己项目下的dist文件里面是否存在app.json 当我找的时候发现本屌的dist里是没有app.json,而是在weapp里面 然后打开项目里的project.config.json 修改第二行的代码加上app.json的所在位置就可以...
  • ![图片说明](https://img-ask.csdn.net/upload/201903/24/1553430850_575377.jpg)
  • 导入执行后 VM292:1 thirdScriptError sdk uncaught third Error module "miniprogram_npm/vant-weapp/mixins/transition" is not defined Error: module "miniprogram_npm/vant-weapp/mixins/transition" is ...
  • 微信小程序开发【前端+后端(java)】

    万次阅读 多人点赞 2018-07-13 22:19:46
    现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的...
  • 1、微信小程序目录下没有package.json文件,这里需要用到packae.json文件;2、新建一个微信小程序,在小程序目录下输入命令:npm init(记得以管理员身份运行开发工具),然后一直回车,直至在小程序目录下,生成...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,184
精华内容 11,273
关键字:

微信小程序导入

微信小程序 订阅