自学微信小程序:First Day

#微信小程序
---
>###2.2.3 目录结构详解
>* app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
>* pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
>* window字段 —— 小程序所有页面的顶部背景颜色,文字颜色定义在这里的。
>>{
  "pages":[   
    "pages/index/index",   
    "pages/logs/logs"   
  ],   
  "window":{   
    "backgroundTextStyle":"light",    
    "navigationBarBackgroundColor": "#fff",   
    "navigationBarTitleText": "WeChat",   
    "navigationBarTextStyle":"black"   
  }   
}   

---
>###2.3.1视图与渲染
>* 在pages目录下创建自己想要做项目的目录,如firstPage。
>* 在firstPage目录下创建first.js文件,在里面写入page即可。
>* 在firstPage目录下创建first.json文件,在里面写入{}即可。
>* 在firstPage目录下创建first.wxml文件,在里面编辑你所要实现的结构内容。
>* 在firstPage目录下创建first.wxss文件,在里面编辑你所要实现的样式内容。
>* 引入模版有两个办法:
>>1. `<include src="..."/>`简单引入一个模版文件里面的内容。   
>>2. `<import src>`引入一个模版文件里面的模版组件。    

>* 在first.js文件的page方法中的data里可以编写你所要编写的数据。
>* 通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。如:`<view wx:if="{{show}}">{{text}} 1 </view>` `<view wx:else>{{text}} 2 </view>` `<view wx:for="{{news}}" wx:for-item="xinwen">`
>* `wx:for-item="xinwen"`声明之后即可使用xinwen这个数组表示出来。
>* index会分析数组的个数并表示出来,如`{{index}}`。
>* button组件中若要触发事件先在`<button>`里做一个bindtap声明,然后再在first.js文件里写入你所要触发的事件。
>* 变量后面加上的**.shift()**为删除功能
>* .setData为一设置功能。一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息,如`this.setData({text:"这是一个新的内容。。。",show:!inShow,news:newsdata})`。

猜你喜欢

转载自blog.csdn.net/qq_39111145/article/details/81133966