微信小程序 #创建 #目录结构 #全局配置 #组件 #JSON #WXML #事件 #双向绑定 #生命周期 #API #页面跳转 #网络API

微信公众平台

1.微信公众平台是基于腾讯提供的微信服务器和APP客户端，由更多的第三方服务者接入，为广大的微信客户提供服务的平台
2.微信公众平台的官网：https://mp.weixin.qq.com/

服务类型：
1.服务号，针对企业用户的，提供一对一的服务，如中国移动、招商银行等
2.订阅号，针对企业或个人的，提供免费的资讯，如前端大全、CSDN等
3.小程序，针对企业或个人的，提供类似于原生APP的功能，达到用完即走的目的。
4.企业微信，为企业内部员工提供日常办公支持，可以与微信、支付等互通。

小程序所有资源不能超过最大2M，如果分包的情况下，最大不能超过16MB

一.创建小程序项目

1.下载安装微信开发者工具
2.启动微信开发者工具登录
3.创建小程序项目
4.输入小程序项目的信息

二.小程序的目录结构

Json 文件 ： 小程序静态配置文件

1.app.json  //小程序的全局配置
2.pages.json //用于某一页面的配置,可覆盖全局配置  (如index.json ...)

wxml 文件 ：小程序的页面标签(不能使用HTML标签,只能使用小程序专有的标签),类似于HTML

wxss 文件 ：小程序的页面样式(基本上和css相同,类似于开发中的css)
1.app.wxss  //该文件用于全局样式;
2.pages.wxss  //该文件用于当前文件样式(覆盖全局样式);  

js 文件 ： 小程序的脚本文件(javascript)
1.app.js   //小程序的入口脚本文件
2.pages.js  //每个页面的脚本文件

每个文件都由.json  .wxml  .wxss  .js这四个文件组成

app.wxss  app.js  app.json 必须存在小程序的根目录下

三.全局配置 app.json

pages属性： 指定小程序页面的组成,array类型,默认情况下,最前面的页面就是小程序的首页;

在pages属性中直接添加"pages/xxx/xxx",会自动创建页面

window属性：用于对标题栏等信息进行设置，object类型;

1.navgationBarTitleText：用于设置标题栏文本，string类型
2.navgationBarTextStyle：用于设置标题栏文本的颜色，string类型，但是颜色只支持black 和white
3.navigationBarBackgroundColor：用于控制标题栏的背景颜色，string 类型
4.backgroundTextStyle：用于设置下拉刷新时loading的样式，string类型，但是颜色只支持light和dark，此属性必须启用enablePullDownRefresh
5.enablePullDownRefresh属性用于控制是否开启下拉刷新，boolean类型

tabbar属性：用于设置小程序的底部选项卡,object类型,底部选项卡数量至少两个,最多五个

color  属性用于控制选项卡文本没有被激活时的颜色

selectedColor  属性用于控制选项卡文本被激活时的颜色

list属性：list属性用于指定底部选项卡的相关信息

1.text    用于控制底部选项卡的显示文本
2.pagePath   用于控制底部选项卡的链接页面
3.iconPath   用于控制没有被激话的选项卡图像
4.selectedIconPath   用于控制被激话的选项卡图像

“style”: “v2”,

style属性    用于指定新版的组件样式,基础库版本>=2.8.0

“sitemapLocation”: “sitemap.json”

sitemapLocation 属性用于指定sitemap.json文件的位置

sitemap.json
sitemap.json用于对小程序页面的搜索规则进行配置，默认情况下，小程序内的所有页面都可以被搜索到。sitemap.json的结构如下：

{
   
	"rules":[
		{
   
			"page":"页面路径",
			"action":"是否允许索引(allow|disallow)",
            "params":["参数名称1","参数名称2"],
            "matching":"参数的匹配规则(exact|inclusive|exclusive|partial)"
		}
	]
}

matching属性值的含义是：
exact：    完全相同
inclusive：至少有
exclusive：都不能有
partial：  只要有

全局配置app.json 示例：

WXSS (Weixin Style Sheets)

微信小程序的样式，其基本与CSS 相同，但是作了两个方面的扩展：
1.新增rpx的单位
2.新增了@import语句

rpx
rpx(Responsive pixel)响应式像素，可以根据屏幕宽度进行自适应，规则屏幕宽度为750rpx
设备	rpx换算px (屏幕宽度/750)	px换算rpx(750/屏幕宽度)
iPhone5       	1rpx = 0.42px	1px = 2.34rpx
iPhone6	        1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

@import
@import语句用于样式导入，其语法结构是：
@import "wxss样式文件的路径及名称"
WXSS中支持ID选择器、类选择器、元素选择器、后代选择器、子代选择器等 ,建议使用类选择器

四. 组件

<view>  //视图容器的组件   类似于div
<view
hover-class="按下去时的样式类名称"
hover-start-time="多长时间后出现点击状(50ms)"
hover-stay-time="状态保留时间(400ms)"
hover-stop-propagation="是否阻止冒泡"  //true false
> ...  </view>

<image>  //组件为图片组件 
<image 
src="图片路径"
 lazy-load="是否懒加载"    //true false
 show-menu-by-longpress="长按时是否显示菜单"    //true false
 > </image>

<swiper>    //滑块视图容器
<swiper
    autoplay="是否自动播放"
    indicator-dots"是否显示提示标志"
    indicator-color="正常显示的指示标志的颜色"
    indicator-active-color="被激活的指示标志的颜色"
    circular="是否采用衔接播放"
    interval="间隔多长时间进行切换"   //毫秒
    duration="切换的时长">  //毫秒
    <swiper-item>...</swiper-item>
     ...
</swiper>




在通过<swiper>实现轮播放时，必须为<swiper>容器指定明确的宽度和高度属性 -- 因为<swiper-item>组件是通过百分比来进行宽度和高度设定的。如:
.swiper{
   
  width:750rpx;
  height:375rpx;
}
.swiper image{
   
  width:100%;
  height:100%;
}

<text>组件   //文本组件，其语法结构是：

<text decode="是否解码" user-select="是否可选">...</text>
可以解析的字符有：&gt;、&lt;、&amp;、&apos;、&nbsp;、&emsp;、&ensp;

<navigator>   //页面链接组件，其语法结构是：
navigator url="当前小程序内的跳转路径" open-type="跳转方式">
    ...
</navigator>

open-type属性值有：
1.navigate，只能跳转到没有tabBar的页面(默认) -- 称为保留跳转(会带有返回标志)
2.switchTab，可以跳转到有tabBar的页面 -- 称为非保留跳转(不会带有返回标志)
3.navigateBack ，跳转到指定页面
4.redirect
5.reLaunch

<button>   //按钮组件,其语法结构是：

<button type="按钮类型(primary|default|warn)"
        size