这次学习只为了解,不深入,看了B站一个讲得很好的学长记录的笔记。
下载微信开发者工具之后,微信扫码登录,创建小程序,在AppID中选择测试号,这样对于开发者测试比较方便。
编译界面如图,(打码部分是微信昵称和头像)
1.创建页面
- 编译方法: (1)界面有“编译”快捷按钮; (2)快捷键ctrl+s
- .js .json .wxml .wxss不同文件的注释方法都略有不同,需要注意
-
全局文件有三个:app.js app.json app.wxss (名称不可更改);
-
创建Pages目录文件,用来存放各个页面;
-
创建页面,页面名字以及4个文件
1)js:页面逻辑实现
2)json:负责标题栏和一些状态栏
3)wxml:管理页面内容
4)wxss:页面排布 -
把内容单元封装在view内部:
<view>内容</view>
用class方式进行页面布局,class也可以对组件进行布局,
class规定的样式名称前要加 ’ . ’ ,也可以对image、text组件不加点进行全局布局。 -
获取图片、文字、按钮的组件,在index.wxml中进行
1)图片<image src='图片路径 '></image>
2)文字<text>内容</text>
3)按钮<button "属性内容">按钮上的内容</button>
-
页面设计
在index.wxml中会有<view class="container"> </view>
,container是自命名的一个容器,这个容器放在index.wxss文件中,主要是设计样式。 -
逻辑设计,在index.js文件中进行
函数定义方法:函数名:function(参数列表){函数内容}, (函数结尾要有逗号)
变量定义方法:data:{变量名称:‘内容’} (两个变量的定义之间用逗号隔开)
2.示例对应解释
-
index.wxml中的内容
-
index.js中部分内容
-
index.wxss对应内容