微信小程序开发——项目基本结构 & 插值表达式 & data-xxx自定义属性 & setData()方法

一、项目目录组成

pages目录:用于存放所有的页面。
utils目录:用于存放工具类文件。
app.js:是入口文件,程序在运行时,首先要执行该文件。
app.json:是全局配置文件,用于配置小程序的信息(它里面配置的是全局信息)。
app.wxss:是全局样式文件。全局样式文件里面定义的选择器,在所有的页面中生效。
project.config.json:是项目配置文件。setting 里面的配置,也可以通过 详情-本地设置 进行配置。
sitemap.json:是SEO配置文件,方便用户搜索到该小程序。

二、app.json文件配置

1、pages配置项

pages里面注册的是视图。用于指定小程序由哪些页面组成,每一项都对应一个页面的路径(含文件名)信息。

  "pages":[
    "pages/index/index"
  ]

2、window配置项

window:是全局窗口配置。
backgroundTextStyle:设置文本样式(下拉loading的样式),仅支持 dark / light。
navigationBarBackgroundColor:设置导航栏背景。
navigationBarTitleText:设置导航栏文本。
navigationBarTextStyle:设置导航栏标题颜色,仅支持 black / white。

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }

3、style

style:设置样式级别,默认是v2。

  "style": "v2"

4、sitemapLocation

sitemapLocation:指明sitemap.json 的位置;默认为 'sitemap.json',即在 app.json 同级目录下名字的 sitemap.json 文件。

  "sitemapLocation": "sitemap.json"

三、页面组成

1、xxx.wxml文件

xxx.wxml文件,就相当于一个html文件。在wxml文件中,不能写传统的html标签,只能写微信提供的组件。下面列出的是一些开发中的基本组件。

(1)view组件

相当于HTML中的div标签。

  热门

(2)text组件

相当于HTML中的span标签。

  文本

(3)swiper组件

swiper是滑块视图容器,它里面只能放swiper-item组件。swiper组件的常用属性:
circular:是否采用衔接滑动
autoplay:是否自动切换
interval:自动切换时间间隔
indicator-dots:是否显示面板指示点
indicator-color:指示点颜色
indicator-active-color:当前选中的指示点颜色

  
    
      
    
  

(4)image

image是图片组件,最好全部采用网络图片,因为小程序的总体积不允许超过2MB。

 

2、xxx.wxss文件

xxx.wxss文件,就相当于一个css文件。在wxss文件中,最好不要写标签选择器和id选择器,统一写类选择器。
为了让小程序里面的内容在各种设备上能够自适应显示,微信推出了响应式单位:rpx。在iphone6中,2rpx=1px。

  width: 60rpx;     /*  相当于width: 30px; */

3、xxx.js文件

xxx.js文件,是交互文件(核心文件)。
Page()函数,返回页面对象,该函数需要传一个配置参数,这个配置参数是一个对象。在这个配置对象中,定义当前页面的所有内容。

(1)data

定义页面的数据。

Page({
    data: {
        name: "热门歌曲",
        songs: [{
            id: 1001,
            name: '千里之外'
        }, {
            id: 1002,
            name: '成都'
        }]
    }
})

(2)自定义函数

开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用this可以访问。

Page({
    // 定义函数
    delSong() {
        this.data.songs.splice(0, 1)
        this.setData({
            songs: this.data.songs
        })
    }
})

4、xxx.json文件

xxx.json文件,是页面的配置文件(它里面配置的是当前页面信息)。用法同app.json一样。

{
  "usingComponents": {},
  "navigationBarTitleText": "首页"
}

四、插值表达式

WXML 中的动态数据均来自对应 Page 的 data。通过插值表达式{{}},可以执行显示js文件中data里面的数据。

1、获取data中数据内容

歌曲分类:{{name}}

2、组件属性(需要在双引号之内)

   

3、关键字(需要在双引号之内)

特别注意:不要直接写 checked="false",其计算结果是一个字符串。转成 boolean 类型后,代表真值。

   

4、运算

可以在 {{}} 内进行简单的运算。

(1)三元运算

 

(2)逻辑判断

   

五、data-xxx 自定义属性

小程序中bindtap绑定方法时不能传参数。所以组件通过data-xxx传递数据。

删除

后台从e.currentTarget.dataset对象中,获取通过data-xxx绑定的属性。
注意:自定义属性的命名用驼峰或者大写命名,小程序内部会自动转成小写。

del(e){
    //解构出自定义的index属性
    let {currentTarget:{dataset:{index}}} = e
 }

六、js文件更新data中数据的方法

1、直接赋值

该方法只更新js页面中的数据,不会重新渲染到页面。

   this.data.section_id = this.data.sections[index].Id

2、setData()方法

该方法更新数据后,重新渲染页面。

   this.setData({
       activeIndex: index
   })

你可能感兴趣的:(微信小程序开发——项目基本结构 & 插值表达式 & data-xxx自定义属性 & setData()方法)