自学小程序的第一天--Vue语法与小程序语法的区别

咖啡要冰
174 阅读2分钟

Vue语法和小程序右相似之处，但并不是完全一样，简单描述一下他们的区别: 1.在小程序中时没有div、span、a、ing标签的，取而代之的是view、text、navigator、image，不过在其中使用还是可以使用的 1.1:navigator在写路径的时候必须在配置里面配置了地址

  1. 在使用类时,是可以正常使用的，包括伪元素

  2. 在小程序中data语法是data:{},而Vue的是data(){}，这里是需要注意的地方,并且在获取data里面的值时需要使用的是this.setData.xxx 并且在写if等函数时不要写在this.setData

  3. 渲染数据时也是使用插值{{}}的形式

  4. 如果想要改变一些基础类型的值时,++是使用不了的,需要把++写在前面才能生效 image.png

配置问题

在App.JSON里面有一些配置

pages

首先由一个对象，在对象中写入pages,pages的作用是类似于注册一个全局的路径

image.png image.png

window

image.png

  1. navigationBarTitleText--的作用是设置标头
  2. navigationBarTextStyle--的作用是设置标头文字的颜色
  3. navigationBarBackgroundColor--的作用是设置标头背景颜色
  4. navigationStyle--的作用是设置导航栏的样式
  5. enablePullDownRefresh--的作用是设置是否下拉刷新

注意:除了文字颜色,其他只有黑色和白色

设置底部导航栏:

image.png 从tabBar里属性依次排序的意思是:

position是设置导航栏的位置，当导航栏在上面时，字体图标会失效

  1. tabBar的背景颜色

  2. 未被选中时文字颜色

  3. 选中状态

  4. tabBar 的位置，在上面时图标失效 在list里面的是地址等信息，这里写的必须是在pages里面定义的，且最少得有两个导航栏

  5. iconPath是未被选中时的图片

  6. selectedIconPath是选中时的图片

注意:

  1. 如果navigator里面的url地址和pages里面的一样时，那么navigator会失效，这时如果还需要继续跳转需要在标签上添加一个open-type="switchTab"属性

  2. 每个文件都有JSON文件,单个JSON文件都可以配置一些配置,这时候,全局的配置回合局部的文件内的配置冲突，这时候就会以局部的优先，全局的会被覆盖 优先:

image.png

覆盖:

image.png

此文章持续改进中,希望各位可以多提出建议

avatar
文章
阅读
粉丝