微信小程序-入门

code_88882024-03-11 18:45

一.通过 Npm方式下载构建

1.下载和安装Npm：Npm https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

或者 https://nodejs.org/en/download/

未安装npm 提示

以下以安装node安装包为例

按任意键继续

安装完成后

2. 下载和安装小程序开发工具 ：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.安装使用weui

https://github.com/wechat-miniprogram/weui-miniprogram

3.1 在小程序根目录下初始化npm

按以下方式避免npm初始化报错

复制代码 
message： NPM packages not found. Please confirm npm packages which need to build are belong to `miniprogramRoot` directory. Or you may edit project.config.json's `packNpmManually` and `packNpmRelationList`
appid: wxfdcdeefd46e93725
openid: o6zAJs4UHtxoUdwBMYwoYl2bQM9Y
ideVersion: 1.06.2401020
osType: win32-x64
time: 2024-03-07 14:31:03

根目录下初始化

复制代码 
 npm init  -y

安装npm

复制代码 
npm  install

配置project.config.json文件

复制代码 
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],

安装小程序weui npm包

复制代码 
npm install --save weui-miniprogram

重新打开此项目

打开工具菜单=>构建npm

二.通过 useExtendedLib扩展库方式下载构建

1.通过微信开发者工具创建项目
2.配置项目根目录下app.json，添加如下内容:
复制代码 
 "useExtendedLib": {
    "weui": true
  },
3.以官网-progress 进度条实例为例:

编辑index目录下 index.js

复制代码 
const app = getApp()

Page({
  data: {

  },
  onLoad: function () {
    console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：')
    console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')
  },
})

编辑index目录下 index.wxml

复制代码 
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />
<progress percent="100" active />

编辑index目录下 index.wxml

复制代码 
progress {margin: 10px;}

编译运行即可

4.以官网-checkbox实例为例:

编辑index目录下 index.js

复制代码 
Page({
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国' },
    ]
  },
  checkboxChange: function (e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  }
})

编辑index目录下 index.json

复制代码 
{ "componentFramework": "glass-easel" }

编辑index目录下 index.wxml

复制代码 
<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>

编辑index目录下 index.wxss

复制代码 
.intro {
  margin: 30px;
  text-align: center;
}
page {
  margin-top: 80px;
}
.checkbox, checkbox {
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
}
.checkbox {
  justify-content: center;
}

编译预览

5.以官网-input实例为例:

编辑index目录下 index.js

复制代码 
Page({
  data: {
    focus: false,
    inputValue: '',
    placeholderStyle: {color:'#F76260'}
  },
  onLoad() {
    // 兼容
    console.log(this.renderer)
    if (this.renderer == 'skyline') {
      this.setData({
        placeholderStyle: {color:'#F76260'}
      })
    } else {
      this.setData({
        placeholderStyle: "color:#F76260"
      })
    }
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  bindReplaceInput: function (e) {
    var value = e.detail.value
    var pos = e.detail.cursor
    var left
    if (pos !== -1) {
      // 光标在中间
      left = e.detail.value.slice(0, pos)
      // 计算光标的位置
      pos = left.replace(/11/g, '2').length
    }

    // 直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
    return {
      value: value.replace(/11/g, '2'),
      cursor: pos
    }

    // 或者直接返回字符串,光标在最后边
    // return value.replace(/11/g,'2'),
  },
  bindHideKeyboard: function (e) {
    if (e.detail.value === '123') {
      // 收起键盘
      wx.hideKeyboard()
    }
  }
})

编辑index目录下 index.js

复制代码 
{ "componentFramework": "glass-easel" }

编辑index目录下 index.wxml

复制代码 
<view class="page-body">
  <view class="page-section">
    <view class="weui-cells__title">可以自动聚焦的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" auto-focus placeholder="将会获取焦点"/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制最大输入长度的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" maxlength="10" placeholder="最大输入长度为10" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">实时获取输入值：{{inputValue}}</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制键盘的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">数字输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="number" placeholder="这是一个数字输入框" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">密码输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" password type="text" placeholder="这是一个密码输入框" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">带小数点的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="digit" placeholder="带小数点的数字键盘"/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">身份证输入的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" type="idcard" placeholder="身份证输入键盘" />
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">控制占位符颜色的input</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" placeholder-style="{{placeholderStyle}}" placeholder="占位符字体是红色的" />
      </view>
    </view>
  </view>
</view>



.page-body {
  margin-top: 80px;
}
.page-section{
  margin-bottom: 20rpx;
}
.weui-input {
  width: 100%;
  height: 44px;
  line-height: 44px;
}
相关推荐
小徐_23334 小时前
Wot UI 2.2.0 发布：Button 新增 subtle，VideoPreview 预览体验继续增强
前端·微信小程序·uni-app
蜗牛前端2 天前
codex 全流程开发上线的高颜值礼簿小程序
前端·微信小程序
爱勇宝6 天前
我想认真做一件小事：让孩子和家长更好地互动
微信小程序·小程序·云开发
唯火锅不可辜负6 天前
避坑指南：iOS 下 scroll-view 嵌套 fixed 布局的“翻车”现场与修复
微信小程序
didiplus6 天前
运维人的随身神器:我把25个常用工具塞进了微信小程序
微信小程序
一份执念7 天前
uni-app 小程序分包限制处理与主包体积优化实战
前端·微信小程序
一份执念7 天前
ECharts 安装与使用完全指南：从全量引入到小程序分包优化
微信小程序·echarts
skiyee8 天前
🔥UniApp 仅需 5 行代码！实现所有页面中控制应用主题变化
前端·微信小程序
Jinkey10 天前
要用户手机号真的是为了打骚扰电话吗？浅谈微信生态会员账号体系与资产合并
后端·微信·微信小程序
用户43242810611412 天前
微信小程序从0到1接入微信支付的完整攻略
微信小程序
热门推荐
012026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？04GitHub 镜像站点05Trae国际版与国内版深度测评：AI原生IDE的双生花06【AI】2026 年具身智能模型和世界模型总结07Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析08飞书长连接_事件订阅（接收消息，审批任务状态变更）092026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？102026年AI架构实战：彻底解决OpenAI接口超时与封号，Python调用GPT-5.2/Sora2企业级架构详解（附源码+压测报告）