title: 微信小程序开始创建到第一个页面详情
date: 2018-08-25 13:21:33
tags: 微信小程序
首先注册账号 进去后点工具 下载完成后打开编辑器 可以简单操作页面数据 注意 修改完后需要保存
需要新建页面时 新建个目录在目录里新建page
小程序中的配置中的app.json的作用
app.json是当前小程序的全局配置,包括了小程序的所有的页面路径 界面表现 网络超时时间 底部tab等。QuickStart 项目里边的 app.json 配置内容如下:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
其中pages字段 --用于描述当前小程序所有页面路径,这是为了让微信客户端指导当前你的小程序页面定义在哪个目录。
window字段 --定义小程序所有页面的顶部背景颜色,文字颜色定义等。具体的可以点击微信开发者工具 开发者文档看各项配置
工具配置project.config.json 配置界面颜色 编译配置等等
页面配置 每个页面的json文件都可以对本页面进行配置 如果对全局配置有冲突的话会覆盖全局配置
有自己的ui框架 weui.wxss
在代码 区域按f1就会显示快捷键目录
在app.json中写的pages就是创建一个数组里面是字符串就是配置自己创建的文件的路径的作用 如果不配置 小程序是不认识的
view与div作用差不多 image与img差不多 text与span差不多
根目录是/
只有被text包围的文字才可以在手机上长按选中单位要用rpx在iphone6上是2:1的一般不用 设计图以ipone6的尺寸做最好 直接量好宽度 只不过单位换成rpx就可以了
静态样式写在wxss文件中 动态样式写在行内样式style中
在里面可以用弹性盒子
微信小程序最外层默认有个page标签可设置最外层的样式
轮播图用swiper插件 最外层包一个view标签 里面用swiper标签 在其里面写seiper-item标签 有几张轮播写几个标签 然后 swiper上面有几个属性分别是加小点的属性 和轮播时间属性
vertical = “true” 轮播垂直滑动 false也不是水平滑动 需要"{{false}}"才可以