微信小程序 - 1.页面创建

1.全局三个文件,分别是app.js app.json app.wxss (名称不可更改)

2.创建Pages目录文件(作用是用来放各个页面)

3.创建页面(给页面起名字,并且创建4个文件)

(1) js文件 : 页面逻辑实现
(2) json文件 : 负责标题栏和一些状态栏
(3) wxml文件 : 管理文件有什么
(4) wxss文件 : 页面排布

4.把内容单元封装在view内部 , 写法 : <view>"内容"</view>

用class的方法对view内容样式进行排布
.....class可以对其他组件样式布局有也有效 , class规定的样式前需加上 '.' , 如果像iamge/text这样的组件的话 , 不需要加 '.' (全局有效)

5.这节课需要用单三个组件 : 图片 , 文字 , 按钮

(1) 图片<iamge src="图片路径"></iamge>
(2)文字<text>内容</text>
(3)按钮<button "属性内容">按钮上的文字</button>
已经学了两个属性 : open-type 和 bindgetuserinfo

6.js文件中函数定义的方法

函数名+ ":" +function("参数列表(可不写)"){"函数内容"}
ps : 两个{}前后要有 ","

7.wxml : 变量写法 : ({"变量名称"})

8.js : 文件中定义变量的方法 : 在data:{"定义变量"}

规则 : 变量名称 + ":" + " ' " + 内容 + " ' "
两个变量中间用 "," 隔开

 data: {
     name:'hello world',
     src:'/images/weixin1.jpg'
 },

9.修改data变量的方法 : this.setData({"修改变量"})

规则 : 变量名称 + ":" + " ' " + 内容 + " ' "
两个变量中间用 "," 隔开

 //修改data里的变量数据
 this.setData({
     name:info.nickName,//更新名称
     src:info.avatarUrl//更新图片来源
 })