微信小程序编写课程笔记
微信小程序编写
框架结构
app部分
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
文件 | 必需 | 作用 |
|---|---|---|
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共配置 |
app.wxss | 否 | 小程序公共样式表 |
app.json用 对象:字符串数组 储存 用户可能访问的路径。(注意是相对于app.json这个文件的路径。)
"pages":["pages/about/about","pages/selfpage/selfpage"]
注意这样写先加载about，再加载selfpageapp.json写全局配置
详细见：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
pages部分
一个page就是一个页面，由四个文件组成，分别是：
文件类型 | 必需 | 作用 |
|---|---|---|
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
json | 否 | 页面配置 |
wxss | 否 | 页面样式表 |
页面.js中写页面对象
页面.wxml添加组件（内容），可调用wxml中的样式规则。
页面.json是对整个页面底部及导航栏进行编辑。
（详细配置可见https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
页面.wxml中写组件的详细参数（字体大小，位置等等）,用样式规则封装。
所以page文件夹中每一个子文件夹就是一个page，都有四个文件，
app在根目录。
内容编写
页面组件（元素）：wxml
<text class = "info" id="zbc" style = "" bindtap="f0" hidden=""
data-user-name="user">Hello world </text>
class 引用配置类
bindtap = "事件处理函数" 将该组件与事件处理函数绑定。
hidden 设定是否隐藏
data- 设定组件自定义的数据，封装在事件对象中，在事件发生的时候传递数据给 事件处理函数。
<image src="图片地址"></image>
如果是本地图片需要放在小程序的文件夹里面。新建一个images，和pages文件夹并列。wxml是微信的标签语法，和html类似。
组件类别由两个<>封装，最后一个加/。
第一个<>中可以写组件的参数。
样式控制
为了让一些组件使用相同的配置类，使用view进行组件划分 (和html的div作用相同) 。
<view>
<image src="http://oliverhangleblog.oss-cn-hangzhou.aliyuncs.com/img/avatar.jpg"></image>
<text>小狐狸的主页</text>
<text>小狐狸的网站：thripear.space</text>
</view>view封装使用的配置写在第一个<>中，
<view class = "配置名字">
...
</view>应用弹性盒子布局（各组件位置）
传统方式：
编写位置：页面.wxss
.container {
background-color: #eee //加个背景颜色
height: 100vh; //整个页面100%高度处
text-align: center
}
text {
display: block;//一个文字组件一行
}
image,text{
margin-bottom: 60px;
}//图片从下到上去给60像素的间隔
border-radius: 50%; 图片圆形边框问题：
1.赋值分散
2.严重依赖页面结构和实际内容大小
使用弹性盒子：
.container {
background-color: #eee ;
height: 100vh;
display: flex; //设置弹性盒子
flex-direction: column; //从上到下竖直分布
justify-content: space-around; //上下均匀分布
align-items: center; //中心分布
}就算是新增组件也可以立刻分布，非常灵活。
把弹性盒子的设定封装在container中，每个页面都可以调用。
注意：container放在全局用（app.wxss），某个page的wxss中的东西不能给其他page用。
适应不同屏幕宽度
引入新的长度单位：rpx
使用rpx，默认所有设备的屏幕高度为750rpx
通常使用iPhone6的屏幕进行设计
如果是100px，直接x2变200rpx。
使用导航连接：navigator组件
注意：text中只能为纯文本
text和navigator是并列，不能包含。
Navigator的重要属性
open-type属性
<navigator url="/pages/selfpage/selfpage" style="display: inline;" open-type="redirect">
url后面写跳转地址，style设置组件display为inline，不会被弹性盒子给分开。
opentype为redirect 进入页面后，左上角不会出现返回按钮。默认为navigate
navigator可以使用text的一些设定。（比如我用了text的maintext封装）hover-class属性： 被选中是使用’中的’设定
<navigator url="/pages/selfpage/selfpage" style="display: inline;" open-type="redirect">声明：
我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=48phd0m6k409
腾讯云开发者
