1
2
3
4

# 全局装 vue-cli
npm install -g @vue/cli

vue -V   # @vue/cli 5.0.x

1

vue create -p dcloudio/uni-preset-vue my-project

1
2

? 请选择 uni-app 模板: hello uni-app   # 官方默认模板
? 是否使用 TypeScript: No                # 也可选 Yes

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# 浏览器（H5）
npm run dev:h5

# 微信小程序（需配微信开发者工具路径）
npm run dev:mp-weixin

# 支付宝小程序
npm run dev:mp-alipay

# App（需配模拟器或真机）
npm run dev:app

 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

my-project/
├── pages/                      # 页面文件（自动注册路由）
│   ├── index/
│   │   └── index.vue
│   ├── about/
│   │   └── about.vue
│   └── list/
│       └── list.vue
├── static/                     # 静态资源（不会被编译）
│   ├── images/
│   └── icons/
├── components/                 # 自定义公共组件
│   └── my-card/
│       └── my-card.vue
├── common/                     # 公共 JS / CSS
│   ├── api.js
│   └── uni.css
├── store/                      # Vuex
│   └── index.js
├── utils/                      # 工具函数
│   └── request.js
├── App.vue                     # 应用配置（生命周期、全局样式）
├── main.js                     # 入口 JS
├── manifest.json               # 应用配置（appid、版本、权限）
├── pages.json                  # 页面路由 + tabBar + navigationBar
├── uni.scss                    # 全局 SCSS 变量
└── package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!-- #ifdef H5 -->
<view>这段只在 H5 显示</view>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<view>只在微信小程序显示</view>
<!-- #endif -->

<!-- #ifdef APP-PLUS -->
<view>只在 App 端显示</view>
<!-- #endif -->

1
2
3
4
5
6
7

// #ifdef H5
console.log('H5 only')
// #endif

// #ifndef MP-WEIXIN
console.log('非微信端都执行')
// #endif

1
2
3
4
5
6
7

/* #ifdef H5 */
.header { padding-top: 44px; }   /* H5 顶部避开浏览器栏 */
/* #endif */

/* #ifdef MP-WEIXIN */
.header { padding-top: 0; }
/* #endif */

1
2
3
4
5
6
7
8
9

<view class="actions">
  <!-- #ifdef H5 -->
  <button @click="shareToWeibo">分享到微博</button>
  <!-- #endif -->

  <!-- #ifdef MP-WEIXIN -->
  <button open-type="share">微信分享</button>
  <!-- #endif -->
</view>

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

// App.vue
export default {
  onLaunch() {
    console.log('App Launch')
  },
  onShow() {
    console.log('App Show')
  },
  onHide() {
    console.log('App Hide')
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// pages/index/index.vue
export default {
  data() {
    return { count: 0 }
  },
  onLoad(options) {
    console.log('页面加载，参数：', options)
  },
  onShow() {
    console.log('页面显示')
  },
  onPullDownRefresh() {
    this.refresh()
  },
  methods: {
    refresh() {
      // 重新拉数据
      uni.stopPullDownRefresh()
    }
  }
}

 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

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的 App",
    "navigationBarBackgroundColor": "#42b883",
    "backgroundColor": "#f8f8f8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#42b883",
    "backgroundColor": "#FFFFFF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/icons/home.png",
        "selectedIconPath": "static/icons/home-active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "static/icons/user.png",
        "selectedIconPath": "static/icons/user-active.png"
      }
    ]
  }
}

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

// 跳转到新页面（保留当前页面）
uni.navigateTo({ url: '/pages/detail/detail?id=123' })

// 重定向（关闭当前页面，跳到新页面）
uni.redirectTo({ url: '/pages/login/login' })

// 切换 tabBar 页面
uni.switchTab({ url: '/pages/index/index' })

// 返回上一页（delta：返回层数）
uni.navigateBack({ delta: 1 })

// 关闭所有页面，打开到应用内的某个页面
uni.reLaunch({ url: '/pages/index/index' })

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 跳转
uni.navigateTo({ url: '/pages/detail/detail?id=123&name=test' })

// 接收（在 onLoad 钩子）
export default {
  onLoad(options) {
    console.log(options.id)    // '123'
    console.log(options.name)  // 'test'
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// 推荐封装
function request(url, method, data) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: 'https://api.example.com' + url,
      method,
      data,
      header: {
        'Authorization': 'Bearer ' + uni.getStorageSync('token')
      },
      success: (res) => {
        if (res.statusCode === 200) resolve(res.data)
        else reject(res)
      },
      fail: (err) => reject(err)
    })
  })
}

// 用法
const data = await request('/user/profile', 'GET')

1
2
3
4
5
6
7
8

// 同步
uni.setStorageSync('key', 'value')
uni.getStorageSync('key')          // 'value'
uni.removeStorageSync('key')

// 异步
await uni.setStorage({ key: 'k', data: 'v' })
const { data } = await uni.getStorage({ key: 'k' })

1
2
3
4
5
6
7

uni.getLocation({
  type: 'gcj02',
  success: (res) => {
    console.log('纬度', res.latitude)
    console.log('经度', res.longitude)
  }
})

1
2
3
4

const info = uni.getSystemInfoSync()
console.log(info.platform)      // 'ios' | 'android' | 'devtools'
console.log(info.screenWidth)
console.log(info.statusBarHeight)   // 状态栏高度

1
2
3
4

uni.showToast({ title: '保存成功', icon: 'success' })
uni.showModal({ title: '提示', content: '确定删除？', success: (r) => {
  if (r.confirm) console.log('用户点了确定')
}})

1
2

<!-- 小程序不支持 v-show（性能差），用 v-if -->
<view v-if="show">内容</view>

1
2
3
4
5

<!-- ❌ 自闭合 -->
<input ...>

<!-- ✅ 自闭合 -->
<input ... />

1
2
3
4
5

<!-- ❌ 用 img -->
<img src="..." />

<!-- ✅ 用 image -->
<image src="..." />

1
2
3
4
5

<!-- ❌ 用 a 标签跳转 -->
<a href="/about">关于</a>

<!-- ✅ 用 navigator 组件或 JS API -->
<navigator url="/pages/about/about">关于</navigator>

1
2
3

<view class="container">
  <text class="title">{{ msg }}</text>
</view>

1
2
3
4
5

.container {
  width: 750rpx;     /* iPhone 6 下等于 375px，全屏 */
  padding: 20rpx;
  font-size: 28rpx;
}

1
2
3
4
5

// ❌ 错误
document.querySelector('.foo').classList.add('active')

// ✅ 正确：通过 Vue 响应式
this.isActive = true

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

// 1. 调 wx.login() 拿 code
uni.login({
  provider: 'weixin',
  success: (loginRes) => {
    const code = loginRes.code
    // 2. 把 code 发到自家后端，换 session_key + openid
    uni.request({
      url: 'https://api.example.com/wechat/login',
      method: 'POST',
      data: { code },
      success: (res) => {
        uni.setStorageSync('token', res.data.token)
      }
    })
  }
})