开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

  • 页面文件遵循 Vue 单文件组件 (SFC) 规范
  • 组件标签靠近小程序规范，详见uni-app 组件规范
  • 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
  • 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期

  • 为兼容多端运行，建议使用flex布局进行开发

    目录结构

    index.vue

    介绍

    遵循vue的单文档组件开发规范
    一个vue文件会存在三个顶级语言模块，分别是

  • template：模板层

  • script：脚本层
  • style：样式层


实例：

数据的双向绑定，实现同步更改两个文本内容

  1. <template>
  2.     <view class="content">
  3.         <image class="logo" src="/static/logo.png"></image>
  4.         <view class="text-area">
  5.             <text class="title">{{title}}</text>
  6.       <input type="text" :value="title" @input="change" />  ********关键部分********
  7.         </view>
  8.     </view>
  9. </template>
  11. <script>
  12.     export default {
  13.         data() {
  14.             return {
  15.                 title: 'Hello'
  16.             }
  17.         },   
  18.         onLoad() {
  20.         },
  21.         methods: {                        ********用户自定义方法********
  22.                 change(e){                                        ********关键部分********
  23.             var txtTitle = e.detail.value;       ********关键部分********
  24.           this.title = txtTitle;               ********关键部分********
  25.         }
  26.         }
  27.     }
  28. </script>
  30. <style>
  31.     .content {
  32.         display: flex;
  33.         flex-direction: column;
  34.         align-items: center;
  35.         justify-content: center;
  36.     }
  38.     .logo {
  39.         height: 200rpx;
  40.         width: 200rpx;
  41.         margin-top: 200rpx;
  42.         margin-left: auto;
  43.         margin-right: auto;
  44.         margin-bottom: 50rpx;
  45.     }
  47.     .text-area {
  48.         display: flex;
  49.         justify-content: center;
  50.     }
  52.     .title {
  53.         font-size: 36rpx;
  54.         color: #8f8f94;
  55.     }
  56. </style>

资源路径说明

生命周期

生命周期

路由

运行环境判断

页面样式与布局

与

ES6支持

NPM支持

TypeScript支持

小程序自定义组件支持

WXS

render.js