自学微信小程序: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})`。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值