zoukankan      html  css  js  c++  java
  • 关于小程序(含uniapp)中使用npm模块

    当我们开发小程序时免不了需要使用npm,对于不想花费过多时间开发组件的人来说是真的方便。

    A:小程序常用的npm安装如vant之类的流程:

    1.创建小程序;

    2.npm init -y初始化创建配置package.json文件;

    3.npm i @vant/weapp -S --production用npm安装vant组件库;

    4.打开开发工具构建npm,提示构建成功后,该怎么引怎么引。

    需要注意的是安装的vant是全部组件,按需加载不过多解释,多余的也不解释了;

    B:因为最近看了一下uniapp(怎么说呢,这玩意用后感觉怪怪的,说不上好与不好,当然这只是我个人的看法),下面说一下uniapp的npm包使用情况:

    正常情况我们用HbuilderX创建一个移动端项目后,想的都是和正常小程序差不多的流程,如安装配置文件啊、npm加载UI组件库啊啥的,

    但是当正常去运行到小程序模拟器时又会发现提示没有可构建的npm包。

    那可不是吗,生成的unpackge文件里找到对应小程序文件也是没有的,运行起来怎么可能有,这个地方就显得uniapp不是那么舒服了,为了继续使用不得不另想他法。

    uniapp提供的条件:

    因为uniapp的为了兼容等的特殊性,下面是最直接的解决方法:

    1.在根目录下创建一个wxcomponents目录(这玩意的话运行打包时小程序就认得),而且需要与大部队同级如components、static、pages等。

    2.直接通过git或其他操作,获取码源:

      a.如果是js文件如animate.css类型的可以把码源直接放在components里面,然后在需要的页面调用,也可放在main.js里面全局调用,其他步骤喝纯VUE引用没啥区别;

      b.如果是量大的组件库,如vant组件库,可以将该码源dist目录拷贝到新建的wxcomponents目录下,并重命名dist为vant-weapp,然后在pages.json的globalStyle中 引入所需要的组件。

       

      其中有一些特殊的组件(在使用时会报错的)需要特殊处理一下,如Notify,不仅需要在pages.json的globalStyle中 引入还需要再main.js中添加到vue原型上

      

    //main.js
    
    import Notify from './wxcomponents//vant/notify/notify';
    
    Vue.prototype.$notify = Notify  

     然后在需要的页面上调用如:

    <van-notify id="van-notify" />//类似一个组件的标识
    
    
     this.$notify({ type: "", message: "" });//调用
    

      

    当然,这里面肯定也会出现一些其他的如路径之类的错误,在我们用到时可以自己尝试去调修,实在修不了,手写吧少年。

  • 相关阅读:
    面试小结
    Everything工具使用
    记 · 工作一周年
    贝叶斯算法原理分析
    MySQL与Oracle主键Query性能测试结果
    K-meams文本聚类算法C++实现
    OPTICS光学算法
    页面添加内容后弹出框与跳转页面
    Webgrid参数格式
    页面2级分类
  • 原文地址:https://www.cnblogs.com/yangc6925/p/14215280.html
Copyright © 2011-2022 走看看