引语

在写微信小程序时,想用官方的weui-miniprogram包里面的msg扩展,使用时npm完以后,网上基本都是复制weui.wxss到根目录,再用view容器标签实现,可是这样就不能灵活调用组件了
图片里面很多想用的属性
也和官方推荐代码不符

<!--WXML示例代码-->
<mp-msg type="success" title="操作成功">
    <view slot="desc">内容详情,可根据实际需要安排,如果换行则不超过规定长度,居中展现<navigator url="" class="weui-msg__link">文字链接</navigator></view>
    <view slot="extend">
        <view>1. 说明1</view>
        <view>2. 说明2</view>
    </view>
    <view slot="handle">
        <button class="weui-btn" type="primary">主要操作</button>
        <button class="weui-btn" type="default">辅助操作</button>
    </view>
    <view slot="footer">
        <view class="weui-footer__links">
            <navigator url="" class="weui-footer__link">底部链接文本</navigator>
        </view>
        <view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
    </view>
</mp-msg>

研究官方文档和网上发现,他们npm都是直接到miniprogram_npm目录下,我就是到node-moudules目录下。
在这里插入图片描述
当然,我这是比较正常的情况,但是以node-moudules为目录引入到app.js始终报错notdefine,node-moudules目录压根在开发程序中就不显示!
在这里插入图片描述
在最终找到了这位的教程,把有问题的目录rm -rf掉了,重建npm,终于成功!

解决方案
在这里插入图片描述
总结起来就是
先装npm,然后在小程序根目录里面任意目录建立node_modules目录,然后在node_modules文件夹所在目录npm init,然后:

npm install (包名) --save --production

构建 npm
接下来和我上面贴的链接差不多不赘述了

其实还是没能成功解决,但是重建项目按照正确流程来就成功了,所以一次就找到这个正确方法的你们很幸运啊!