去微信开放平台各种账号信息等注册。下载微信开发者工具。
打开微信开发者工具。 项目 - 新建项目 - 创建小程序 按要求填写项目名称、appID等,后端服务选项,看需求,入门学习就先尝试不使用云服务配置。 模版选择先尝试选JS-基础模版。
创建项目后
目录结构文件说明:
pages目录:放对应的页面文件
基本上页面文件配套4个文件:js,json,wxss,wxml
js文件:是逻辑交互文件: 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。
json文件:是配置文件: 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
wxss文件:样式文件: 提供了全局的样式和局部样式等等
wxml文件:模版文件: 用来描述当前这个页面的结构
项目打开后 工程名文件 右边有功能图标。 一个是新建文件夹。一个是新建文件。 也可以在 工程目录里,鼠标右击 选择新建Page 创建页面文件。会同时创建4个文件(js、json、wxss、wxml)
app示例: 底部4个tab样式制作 1.在page文件夹下 有件创建4个tab的文件。以及对应文件夹下面的 4个 tab主页page文件。 2.在项目工程目录下 创建images文件夹 用来存放图片 3.在app.json文件里 pages 参数里 会自动把创建的页面路径添加进去。 类似于所有工程里的Page页面路径。这里都要有。类似OC的文件索引这种概念。
因为要做4个tab底部样式:app.json提供了 参数 tabBar 根据它的语法进行配置即可。
"tabBar": { "backgroundColor": "#ffffff", "borderStyle":"white", "selectedColor": "#007DFA", "color": "#646464", "list": [ { "pagePath": "page/tabBar/home/home", "iconPath": "images/tabBar/home-icon-d.png", "selectedIconPath": "images/tabBar/home-icon-s.png", "text": "首页" }, { "pagePath": "page/tabBar/user/user", "iconPath": "images/tabBar/user-icon-d.png", "selectedIconPath": "images/tabBar/user-icon-s.png", "text": "我的" } ]
window属性 配置 app整体风格。导航栏字体之类的
permission属性 : 权限。 比如定位权限申请。提示文案配置 "permission": { "scope.userLocation": { "desc": "您的位置信息将用于小程序位置" } },
subpackages属性:子包。 据说是限制每个包最大多少M,不能超过大小。所以分成很多子包来控制每个包的大小。 这个属性就是把其他子包路径加载联系起来。
"subpackages": [ { "root": "page/IM", "pages": [ "chatroom/chatroom" ] }, ]