微信小程序入门开发

介绍小程序:
2017年1月9日，张小龙，腾讯。
支付宝现在也推出了小程序
无需安装，无需卸载，触手可及，用完即走
小程序基于微信，微信基于腾讯，腾讯有庞大的用户基数。
小程序的核心技术基于h5 ajax的web app
开始开发:
https://mp.weixin.qq.com/



首页 基本设置

版本

微信小程序开发最好参照官方文档



扫码登陆微信小程序开发工具





小程序的结构

Index.js 脚本文件，负责加载数据，实现部分特效，里面有很多定义好的js方法和 结构用来加载数据。
Index.json 配置文件，有很多关于页面的配置
Index.wxml 前端页面，拥有独立的标签系统，和HTML神似
Index.wxss 样式文件，和css一样
微信小程序的前端样式，每个页面至少三个文件维护
Js,wxml,wxss
但是也有全局配置，开发者可以根据开发需通过修改配置要进行样式的修改

微信全局配置的文档
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
Page 全局的页面统计列表
创建一个新页面



Window 全局默认窗口

配色网站：https://www.webdesignrankings.com/resources/lolcolors/
Tab_Bar 底部导航栏
Color 文字颜色
backgroundColor 导航栏背景颜色
selectedColor 选择后字体颜色
List 导航内容列表，最少两个，最多五个
Text 导航文本
pagePath 导航连接，必须是在page参数之内的连接
iconPath 导航展示图标
selectedIconPath导航按下展示图标

案例如下：
{
“pages”: [
“pages/index/index”,
“pages/logs/logs”,
“pages/list/list”
],
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#011627”,
“navigationBarTitleText”: “大泽九章”,
“navigationBarTextStyle”: “white”
},
“tabBar”: {
“color”: “#EFFFE9”,
“backgroundColor”: “#011627”,
“selectedColor”: “#2EC4B6”,
“list”: [
{
“text”: “首页”,
“pagePath”: “pages/index/index”
},
{
“text”: “列表页”,
“pagePath”: “pages/list/list”
}
]
},
“sitemapLocation”: “sitemap.json”
}
添加图标的步骤
1、下载图标

2、设置
{
“text”: “个人中心”,
“pagePath”: “pages/person/person”,
“iconPath”: “image/persion_select.png”,
“selectedIconPath”: “image/persion.png”
}
3、效果

轮播图特效