一、小程序简介
- 微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用
- 微信小程序：2017.1发布
- 小程序技术文档：developers.weixin.qq.com/miniprogram…
- 小程序和普通H5页面的区别：developers.weixin.qq.com/miniprogram…
注意：
小程序：没有DOM和BOM操作方法，只支持JS最核心ECMAScript语法
类似document.getyElementById,window.alert,location这种操作是不允许的
小程序也是有数据驱动，组件化的思想
二、如何用小程序开发呢
-
H5开发：只需要有编辑器和浏览器就可以
-
小程序：必须下载一个开发者工具（集成开发，预览，调试，版本管理于体）
-
注册小程序账号:可以对小程序上线发布，审核，接口配置,appid对
注册地址：mp.weixin.qq.com/wxopen/ware… 按照步骤提示去完成
在注册的小程序账号中获取AppID(小程序ID)
4.当创建好项目后，就可以干活啦
- 熟悉一下常用标签：
view:相当于div
button:还是普通的button
text:相当于span
image:相当于img
参考：developers.weixin.qq.com/miniprogram…
-
熟悉小程序的目录结构
-
app.js:小程序的入口文件 相当于vue中的main.js
通过App({});执行入口文件
-
app.json:是全局配置文件
-
参考链接：developers.weixin.qq.com/miniprogram…
-
app.wxss:全局样式文件 类似于公式样式
-
project.config.json:项目配置文件 （通常不动）
-
sitemap.json：索引页面，好让用户通过搜索找到咱们小程序（一般不动）
-
pages:通话平时干活常用的目录
每个页面通常由4部分组成：以index文件为例说一下
index:wxml 相当于原先的html index.wxss 相当于原先的css index.js 和以前一样，页面页面交互逻辑的文件 index.json 用于配置当前页面的窗口状态 注意：页面级的json只能使用app.json中的window内部的属性!!!!! 页面配置参考链接：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
- 如何配置tabBar
官方tabbar参考链接：developers.weixin.qq.com/miniprogram…
具体的配置，代码如下：
"tabBar":{
"color":"#ccc", //未选中的颜色
"selectedColor":"#f00", //选中的文本颜色
"list":[ //通过list数组来配置每个tabbar项
{
"pagePath":"pages/index/index", //页面要跳转的路径
"text":"首页11111", //配置tabbar文本内容
"iconPath":"/assets/icons/home.png", //设置未选中的tabbar图标
"selectedIconPath":"/assets/icons/home_active.png" //设置选中的tabbar图标
},
{
"pagePath": "pages/cate/cate",
"text": "分类",
"iconPath": "/assets/icons/cate.png",
"selectedIconPath": "/assets/icons/cate_active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "/assets/icons/cart.png",
"selectedIconPath": "/assets/icons/cart.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "/assets/icons/my.png",
"selectedIconPath": "/assets/icons/my.png"
}
]
}
如何创建新的页面
注意问题：
页面的json必须添加{} 空对象
页面的js必须添加Page({});
批量创建4个文件--详细见网盘中的录屏
