小程序 目录自定义构建

1.默认情况下项目目录的最外层是小程序的根目录,通过 project.config.json 可以指定小程序的根目录,源代码统一放到src下(此时 / 指向了src下,分包除外 ),这样做的好处是能够优化目录结构,更好的管理项目的代码:

2.小程序代码单独放到一个目录维护,这时候需要自定义项目根目录,同setting节点同级:

{
  "setting": {
    ...
  },
+ "miniprogramRoot": "src/"
}

miniprogramRoot 自定义小程序的根目录

3.如果项目中有npm依赖,也需要自定义npm目录,(把miniprogram_npm放在src下时,需要进行配置才可以正常构建npm):

{
  "setting": {
-    "ignoreDevUnusedFiles": false,
-    "ignoreUploadUnusedFiles": false,
    ...
+    "packNpmManually": true,
+    "packNpmRelationList": [
      {
+        "packageJsonPath": "./package.json",
+        "miniprogramNpmDistDir": "./src"
      }
    ],
    ...
  },
}
  • packNpmManually 启用 npm 构建手动配置

  • packNpmRelationList 手动构建 npm 配置详情:

  • packageJsonPath包管理文件位置

  • miniprogramNpmDistDir构建npm文件存储位置

4.小程序开启支持 sass

{
  "miniprogramRoot": "src/",
  "setting": {
    "useCompilerPlugins": ["sass"],
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./src"
      }
    ],
  }
}
  • miniprogramRoot 项目的根目录为 src

  • setting.useCompilerPlugins 启用了 sass 支持

  • packNpmRelationList 指定了 npm 构建时所需的 package.json 的位置以及构建后代码的生成位置

当出现这个报错,需要将sitemap.json 移动到src目录下

  • ignoreDevUnusedFilesignoreUploadUnusedFiles 点击链接了解

问题:如何解决“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?|| 重新编译

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以使用自定义组件来实现自定义的模态弹窗效果。首先,你需要在项目中创建一个自定义组件,包括wxml、wxss和js文件。在自定义组件的wxml文件中,可以使用view、button等组件来构建你想要的弹窗界面。在wxss文件中,可以定义弹窗的样式。在js文件中,你可以定义弹窗的行为逻辑,比如点击按钮的事件处理函数等。然后,在页面中引入该自定义组件,并在合适的位置使用该组件来展示你的自定义模态弹窗。 以下是一个简单的示例代码,演示了如何自定义一个模态弹窗组件: 1. 创建自定义组件 在项目目录下创建一个名为modal的文件夹,在该文件夹下创建modal.wxml、modal.wxss和modal.js文件。 2. 在modal.wxml中添加弹窗的内容,比如标题、内容和按钮等。 ``` <view class="modal"> <text class="title">{{title}}</text> <text class="content">{{content}}</text> <button class="cancel-btn" bindtap="onCancel">取消</button> <button class="confirm-btn" bindtap="onConfirm">确定</button> </view> ``` 3. 在modal.wxss中定义弹窗的样式,比如背景颜色、字体大小和按钮样式等。 ``` .modal { background-color: #fff; padding: 20rpx; border-radius: 10rpx; } .title { font-size: 24rpx; font-weight: bold; margin-bottom: 10rpx; } .content { font-size: 20rpx; margin-bottom: 20rpx; } .cancel-btn, .confirm-btn { background-color: #007aff; color: #fff; padding: 10rpx 20rpx; border-radius: 10rpx; } ``` 4. 在modal.js中定义弹窗的行为逻辑,比如点击按钮的事件处理函数。 ``` Component({ properties: { title: { type: String, value: '提示' }, content: { type: String, value: '请输入内容' } }, methods: { onCancel() { this.triggerEvent('cancel'); }, onConfirm() { this.triggerEvent('confirm'); } } }) ``` 5. 在页面中引入该自定义组件,并在需要显示弹窗的地方使用该组件。 在页面的json文件中添加以下代码: ``` { "usingComponents": { "modal": "/path/to/modal/modal" } } ``` 在页面的wxml文件中使用该自定义组件: ``` <modal title="自定义弹窗标题" content="自定义弹窗内容" bind:cancel="onCancel" bind:confirm="onConfirm"></modal> ``` 在页面的js文件中定义弹窗相关的事件处理函数: ``` Page({ onCancel() { console.log('点击了取消按钮'); }, onConfirm() { console.log('点击了确定按钮'); } }) ``` 这样,你就可以根据需要自定义wx.showModal的样式和行为了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不叫虎子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值