zoukankan      html  css  js  c++  java
  • 原生微信小程序——》添加原生配套weuiminiprogram

    在网上找了很多关于微信原生小程序weui框架的引入配置教程,也看了官网都不太理想,尝试了多次终于成功,在这里把最新的配置方式分享给大家!(2021/12/3)
    1、打开根目录
    npm init
    npm install weui-miniprogram --save
    2、打开project.config.json
    设置为如下:

    "packNpmManually": true,
        "packNpmRelationList": [
          {
            "packageJsonPath": "./package.json",
            "miniprogramNpmDistDir": "./"
          }
        ],
    

    miniprogramNpmDistDir为node_modules根目录
    3、选择【工具】-【构建npm】
    4、打开app.wxss文件引入weui.wxss
    @import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'
    5、最后就可以使用了,举个小例子:
    1、首先在页面(如index页面)的 json 文件加入 usingComponents 配置字段

    {
      "usingComponents": {
        "mp-dialog": "weui-miniprogram/dialog/dialog"
      }
    }
    

    2、然后可以在对应页面的wxml中直接使用该组件

    <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
        <view>test content</view>
    </mp-dialog>
    

    3、在对应页面的js中配置相应data数据,js方法交互等

    Page({
        data: {
            buttons: [
            	{ text: '取消' },
            	{ text: '确认' }
            ]
        }
    })
    
  • 相关阅读:
    shell学习(11)- seq
    bash快捷键光标移动到行首行尾等
    shell学习(10)- if的使用
    Python 执行 Shell 命令
    查看 jar 包加载顺序
    Linux 中的 sudoers
    Ubuntu 开机启动程序
    指定 Docker 和 K8S 的命令以及用户
    Spark on K8S(Standalone)
    Spark on K8S (Kubernetes Native)
  • 原文地址:https://www.cnblogs.com/huayang1995/p/15638116.html
Copyright © 2011-2022 走看看