1.小程序的代码结构与基本配置
- project.config.json 保存微信开发者工具的配置信息(个性化设置)
- app.js 注册微信小程序应用
- app.json 微信小程序的全局配置(网络请求的超时时间,窗口表现,各个页面的注册路径等)
- Pages 注册微信小程序的所有页面
- window属性 用于设置小程序的状态栏、导航条、标题、窗口背景色
- navigationBarBackgroundColor 设置导航栏背景
- navigationBarTextStyle 设置标题栏颜色仅支持黑白
- navigationBarTitleText 导航栏标题内容
- backgroundColor 窗口背景颜色 (下拉刷新背景色)
- enablePullDownRefresh 下拉刷新控制
- disableScroll 页面是否开启滚动
3.tabBar 如果小程序多tab, 可设置tab栏的表现
4.networkTimeout 设置网络的超时时间
5.debug 调试
- app.wxss 设置小程序的全局样式
- pages文件夹存放所有小程序的页面 : 每一个小程序页面最多有四个文件组成:js文件,json文件,wxml文件和wxss文件
- js文件处理小程序的逻辑和数据交互
- json文件配置小程序页面的配置信息
- wxml展示页面的元素和内容
- wxss设置页面的样式
- util.js文件 存放工具 实现代码复用
2. 微信开发者工具写HelloWorld
- 开发者工具的版本:
- 预览版本 预览小程序在手机上的表现
- 开发版本 将本地代码上传成具有版本号的小程序的应用
- 体验版本
- 审核版本
- 线上版本 小程序通过审核之后发布上线
- 开发者工具调试器模块:
- console模块:打印小程序页面调试log信息
- sources模块:脚本文件 可进行断点调试
- network模块:网络请求状态信息 以及请求资源的响应数据等
- security模块:调用wx.setStorage和wx.setStorageSync函数时 动态修改缓存数据
- wxml模块:页面的各个组件元素
- sensor模块:地理位置信息和设备旋转角度
先写app.js和app.json
- app.js
App函数:传入obj类型参数(生命周期,事件处理函数等)
App({})
- app.json
在pages字段注册小程序所有页面路径,让微信客户端知道小程序定义在哪个目录
(pages里是list类型,存放的是所有页面的路径)
{
"pages":[
]
}
创建一个小程序页面,需要四个文件: js , json, wxml, wxss
- helloworld.wxml
<view>hello world</view>
- helloworld.js
Page({})
- helloworld.json
{ }
- helloworld.wxss 配置页面样式
view{
width:100%;
height:50rpx;
text-align: center;
}
3.像素
在iphone6视图下进行设计,宽度是375rpx,每个组件的rpx比例能够完全还原。
设置组件的宽高:
方法1:设置style
<image style='width:700rpx;height:700rpx' src='/images/head.jpg'></image>
方法2:在wxss中设置该class的样式
#wxss
.user-header{
height: 350rpx;
width: 350rpx;
margin-top: 150rpx;
border-radius: 50%;
}
#wxml
<image class='user-header' src='/images/head.jpg'></image>
- 使用wx:if=''{{false}}''可以隐藏该标签' 。
- 使用wx.navigateTo是从父级页面跳转到子级页面(子级页面最多有五级),跳转之后,可返回到父级页面,之前的页面执行onHide(页面隐藏)函数。
- 使用wx.redirectTo是平行页面之间的跳转,不存在子父级之间的关系,跳转之后不可返回到之前的页面,而且之前的页面执行onUnload(页面卸载)函数。
- 在JS文件中,先执行onLoad事件,再读取data中的数据进行数据绑定。
- 冒泡事件:触发子节点的事件时也会触发父节点的事件。bindTap是冒泡事件。
- 非冒泡时间:触发子节点的事件不会触发父节点。catchTap是非冒泡事件。