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: '确认' }
            ]
        }
    })
    
  • 相关阅读:
    jsp报源码
    c#简单写售票系统
    linux常用命令大全[转]
    【转载】大型网站渗透思之信息收集
    Ajax初窥
    屏蔽win10中文输入法
    win10禁止更新的方法
    win10进入到安全模式的三种方法
    7代CPU安装win7的方法
    python的输出问题
  • 原文地址:https://www.cnblogs.com/huayang1995/p/15638116.html
Copyright © 2011-2022 走看看