1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

注册小程序账号
  ↓ 获取 AppID
安装微信开发者工具
  ↓ 创建项目（填 AppID）
开发小程序
  ↓ wxml + wxss + js + json
真机预览
  ↓ 体验码 / 体验成员
上传代码
  ↓ 后台提交审核
审核通过
  ↓ 全量发布 / 分阶段发布

1
2
3
4
5
6

pages/
├── index/
│   ├── index.wxml     # 模板（类 HTML）
│   ├── index.wxss     # 样式（类 CSS）
│   ├── index.js       # 逻辑
│   └── index.json     # 配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- pages/index/index.wxml -->
<view class="container">
  <text>{{message}}</text>
  <button bindtap="onTap">点击</button>

  <!-- 条件渲染 -->
  <view wx:if="{{loading}}">加载中...</view>

  <!-- 列表渲染 -->
  <view wx:for="{{items}}" wx:key="id">
    {{item.name}}
  </view>
</view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* pages/index/index.wxss */
.container {
  padding: 20rpx;
}

text {
  font-size: 32rpx;
  color: #333;
}

button {
  background: #1aad19;
  color: white;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// pages/index/index.js
Page({
  data: {
    message: 'Hello',
    items: [],
    loading: false,
  },

  onLoad() {
    this.loadData();
  },

  onTap() {
    wx.showToast({ title: '点击了' });
  },

  async loadData() {
    this.setData({ loading: true });
    try {
      const res = await wx.request({
        url: 'https://api.example.com/items',
      });
      this.setData({ items: res.data });
    } finally {
      this.setData({ loading: false });
    }
  },
});

1
2
3
4
5
6
7

{
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh": true,
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

{
  "pages": [
    "pages/index/index",
    "pages/user/user",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "我的小程序",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#1aad19",
    "backgroundColor": "#ffffff",
    "list": [
      { "pagePath": "pages/index/index", "text": "首页" },
      { "pagePath": "pages/user/user", "text": "我的" }
    ]
  },
  "networkTimeout": {
    "request": 10000
  },
  "sitemapLocation": "sitemap.json"
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// 网络请求
wx.request({ url, method, data, header, success, fail })

// 弹窗
wx.showToast({ title: '成功', icon: 'success' })
wx.showModal({ title: '提示', content: '是否删除' })

// 路由
wx.navigateTo({ url: '/pages/detail/detail?id=123' })
wx.redirectTo({ url: '/pages/login/login' })
wx.switchTab({ url: '/pages/index/index' })
wx.navigateBack({ delta: 1 })

// 存储
wx.setStorageSync('key', 'value')
wx.getStorageSync('key')

// 登录
wx.login({
  success: (res) => {
    console.log(res.code)  // 发送到后端换 session
  }
})

// 获取用户信息
wx.getUserProfile({
  desc: '用于完善资料',
  success: (res) => console.log(res.userInfo)
})

// 位置
wx.getLocation({
  type: 'gcj02',
  success: (res) => console.log(res.latitude, res.longitude)
})

// 支付
wx.requestPayment({
  timeStamp, nonceStr, package, signType, paySign,
  success, fail
})

// 分享
onShareAppMessage() {
  return { title: '分享标题', path: '/pages/index/index' }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

App({
  onLaunch() {
    // 启动时执行一次
  },
  onShow() {
    // 从后台进入前台
  },
  onHide() {
    // 从前台进入后台
  },
  globalData: {
    userInfo: null,
  },
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

Page({
  onLoad(options) { /* 加载 */ },
  onShow() { /* 显示 */ },
  onReady() { /* 首次渲染完 */ },
  onHide() { /* 隐藏 */ },
  onUnload() { /* 卸载 */ },
  onPullDownRefresh() { /* 下拉刷新 */ },
  onReachBottom() { /* 上拉触底 */ },
  onShareAppMessage() { /* 分享 */ },
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

# 1. npm init
npm init

# 2. 安装
npm i @vant/weapp -S --production

# 3. 构建 npm
# 开发者工具 -> 工具 -> 构建 npm

# 4. 使用
# app.json 或页面 json
{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

1

<van-button type="primary">按钮</van-button>

1

npm i tdesign-miniprogram -S --production

1
2
3
4
5
6
7

# uni-app
npm init vue@latest
# 安装 uni-app 模板

# Taro
npm i -g @tarojs/cli
taro init myApp