uni-app 原生微信小程序语法支持

在uni-app中，为了兼容并包原生微信小程序的语法，DCloud团队做了大量的工作，使得开发者可以在uni-app中直接使用微信小程序的部分语法和API。这对于从微信小程序迁移至uni-app的开发者来说，无疑大大降低了迁移成本。下面是一些关键点的代码示例，展示如何在uni-app中使用微信小程序的语法。

1. 页面配置（page.json）

在uni-app中，页面配置主要通过pages.json进行，但你可以使用类似微信小程序的app.json风格配置，uni-app会自动识别并转换。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

2. WXML与Vue模板语法

uni-app主要使用Vue模板语法，但也支持将WXML直接嵌入.vue文件的template部分。例如：

<template>
  <view class="container">
    <text>{{message}}</text>
    <!-- 直接使用微信小程序的标签 -->
    <button bindtap="handleTap">点击我</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    };
  },
  methods: {
    handleTap() {
      uni.showToast({
        title: '你点击了按钮',
        icon: 'none'
      });
    }
  }
};
</script>

3. WXSS与SCSS/LESS

uni-app支持WXSS样式，同时也支持SCSS、LESS等预处理器。你可以在.vue文件的<style>标签中直接使用WXSS语法。

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
button {
  margin-top: 20px;
}
</style>

4. JS API

uni-app封装了微信小程序的大部分API，并提供了uni对象进行调用。例如，网络请求、存储等。

uni.request({
  url: 'https://api.example.com/data',
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});

总的来说，uni-app通过其强大的兼容性和灵活性，使得开发者可以无缝地在项目中混合使用微信小程序的语法和API，极大地提高了开发效率和项目可维护性。