小程序与普通网页开发的区别
使用浏览器打开 https://mp.weixin.qq.com/网址,点击右上角的立即注册即可进入到小程序开发账号
一. 注册流程如下
1.注册:选小程序
2.填写账号信息:
3.提示邮箱激活:
4.点击链接激活账号:
5.选择主体类型:中国大陆、个人
6.主体信息登记:个人、
7.获取小程序的AppID:点左侧的开发、开发设置、创建小程序项目时,需要用到APPID
二. 安装开发者工具
三. 创建小程序项目
1.点击加号按钮
2.填写项目信息 : 开发模式——》小程序、后端服务——》不使用云服务、语言javascript
3.在模拟器上查看项目效果(点头部的编译)
4.在真机上预览项目效果(点头部的预览)扫码查验
5.以头像为界限主界面的5个组成部分:头像上部是菜单栏、头像那栏是工具栏、头像下是模拟器、模拟器右边是代码编辑区、编辑区下边是调试区
四. 项目组成结构
1.pages: 用来存放所有小程序的页面
2.utils 用来存放工具性质的模块(格式化时间的自定义模块)
3.app.js 小程序项目的入口文件(页面的脚步文件,存放页面数据,事件处理函数)
4.app.json 小程序项目的全局配置文件(当前页面的配置文件,配置窗口外观、表现)
5.app.wxss 小程序项目的全局样式文件(当前页面的样式表文件)
6.project.config.json 项目的配置文件
7.sitemap.json 用来配置小程序及其页面是否允许被微信索引
8.wxml文件(页面的模板结构文件)
- 页面的.json配置文件,可对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项
9.新建小程序页面只需要在app.json——》pages中新增页面的存放路径即可
一 . 小程序代码的构成——WXSS样式
1.WXML和HTML的区别
HTML (div、span、img、a)
WXML (view 、text、image、navigator)
《a href = ‘#’>超链接》《/a》
《navigator url=‘/pages/home/home’》《/navigator》
2.WXSS和CSS的区别
CSS中需要手动像素单位换算,例如rem
WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动换算
项目根目录中的app.wxss会作用于所有小程序页面
局部页面的.wxss样式仅对当前页面生效
.class和#id
element
并集选择器、后代选择器
::after和::before登伪类选择器
二.小程序代码的构成——JS逻辑交互
① app.js:是整个小程序项目的入口文件,通过调用App()函数来启动整个小程序
② 页面的.js:是页面的入口文件,通过调用Page()函数来创建并运行页面
③ 普通的.js文件:是普通的功能模块文件,用来封装公共的函数或属性供页面使用
① 把小程序的代码包下载到本地
② 解析app.json 全局配置文件
③ 执行app.js小程序入口文件,调用App()创建小程序实例
④ 渲染小程序首页
⑤ 小程序启动完成
① 加载解析页面的.json配置文件
② 加载页面的.wxml模板和.wxss样式
③ 执行页面.js文件,调用Page()创建页面实例
④ 页面渲染完成
在data中定义页面数据
在页面对应的.js文件中,把数据定义到data对象中即可:
Page({
data: {
//字符串类型的数据
info: 'init data',
// 数组类型的数据
msgList:[{msg: 'hello'},{msg:'world'}]
}
})