微信小程序学习第一天

微信公众平台–微信小程序的开发

注册小程序账号：小程序
** 微信web开发工具的下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19032210**

项目新建界面：

小程序使用界面：

小程序目录结构

组件的创建

1.在pages目录创建目录 test
2.在test文件夹下创建page 命名为test
3.创建成功得到四个文件 test.js、test.json、test.wxml、test.wxss
4.在全局组件app.json下调用新建的文件为第一个显示组件
app.json pages:[
“pages/test/test”,
“pages/index/index”,
“pages/log/log”
]

不同类型的文件

小程序中wxml是一种非常严格的xml文件类型

1. 所有标签要求有开始必须有结束
2. 属性必须使用双引号
3. 小程序运行时，将会自动将组件其他部分如:js/wxss自动加载到当前的wxml文件
4. 小程序不需要引入与组件同名的js文件
   ** 常用的标签**

<view></view>      //相当于<div></div>
    <text></text>      // 相当于<span></span><p></p>
    <image></image>   //相于当于<img src="" />
    <form></form>     //相于当于<form></form>
    <navigator></navigator> //相于当于 <a></a>

小程序–image
image的默认大小为 320*240
图片的路径:

  <image src="图片的路径" />

(1)本地绝对路径 /pages/img/1.jpg
(2)网络绝对路径 http://127.0.0.1:3000/1.jpg
图片的属性
（1）lazy-load 懒加载软件开发过程中 提升效率，健壮性。img是通过ajax请求获得

 <image src="{{img}}" lazy-load="true" />

(2)mode aspextFill等比例显示图片以短边为准， aspectFit 等比例显示图片以长边为准

<image src="http://127.0.0.1:3000/1.jpg" lazy-load="true" mode="aspectFill"/>

小程序–text的属性
selectable false 文本内容是否可以选中复制
decode false 是否是文本编码
小程序–js
每个组件对应一个.js文件
Page()当前组件对象
Page({data:{},onload:function(){},…})

• 小程序js区别
  -ECMAScript
  -基于类型:number;string;boolean;null;undefined
  -引入:Object;Date;Math;…
  -自定义对象
  -DOM/BOM 没有
  -小程序有顶级对象 wx(类似window)

微信样式文件 (wxss)
新特性一:rpx(r响应式px像素)
(1)设计师ps创建手机效果图-切片(图片) 物理像素
(2)前端:创建静态网页(html,css,js,vue) 逻辑像素

• 物理像素=逻辑像素*dpr
• dpr iphone6 dpr 2
  iphone6plus dpr 3
  示例:物理像素 750 = 375*2
  小程序:物理像素 750 = 750rpx;
  新特性二:@import
  @import “引其它样式文件”

获取data中的数据以及如何修改data中的数据

//获取
 //.wxml文件中
<view>{{msg}}</view>
 //.js文件中
 data{msg:"hello"}
 //修改 
 this.setData({msg:"张三"})

组件的生命周期
组件的生命周期：一个组件从开始创建到使用至销毁的过程
onload组件：组件创建成功并且加载完成触发一次该组件
1.在此事件中发送ajax请求
2.获取其他组件传递给当前组件的参数：onload(options){}
onReady 组件初始化渲染（数据模板绑定）完成触发一次
onShow 显示组件；前台（显示）后台（隐藏）
onHide 隐藏组件；前台后切换
onUnload 组件卸载（将组件移出内存）
示例：小程序从一个组件a跳转到组件b

//当前的组件为exam01
//在onload的生命周期,在exam01组件开始加载的时候，通过onload生命周期跳到index组件
//此时触发onUload生命周期，exam01组件卸载
onload:function(){
 wx.redirectTo({url:"/pages/index/index"})
}

组件–特殊事件
onPullDownRefresh 用户下拉操作

• 注意事项:
  默认小程序禁止用户下拉操作
  允许用户下拉操作

(1)全局允许所有组件用户可以下拉操作 app.json
“window”: {
“enablePullDownRefresh”: true,
}
(2)当前组件允许用户下拉操作 exam02.json
{“enablePullDownRefresh”: true}
onReachBottom 用户上拉触顶
onPageScroll(opt) 用户滑动操作
opt.scrollTop 页面垂直方向己经滚动的距离
微信小程序–配置文件json
json语言很严格，没有注释
全局配置文件 app.json（以下均在app.json里面配置）
pages:[] 保存组件路径列表
pages:组件列表，默认显示第一位组件
window: 全局的窗口样式
“navigationBarBackgroundColor”: “#f00” 顶部背景样式
“navigationBarTitleText”: “学子商城”, 顶部导航文本
“navigationBarTextStyle”: “black” 顶部导航文本样式（只能为black或者white）

tabbar:						底部导航条
    "tabBar":{
        "list":[
            {  //底部导航条内容(图片;文字)
              "pagePath":"组件路径",   //json 不用加/
              "text:"",                //按钮文字
              "iconPath":"",           //默认图片
              "selectedIconPath":""    //选中图片
            }
        ]
     }

1. 组件路径不加 /
2. 图片路径不支持网络只支持本地
3. pagePath：组件路径一定在 pages:[]
4. 哪些组件可以显示tabbar 完整列表,当组件添加tabbar到中,此组件可以显示tabbar显示

如果当前组件定义tabbar中,缺点：
使用 wx. redirectTo({url:“组件路径”}) 不能跳转成功
常见错误
(1) list中对象最少有2个
(2)tabBar.list[0].iconPath 文件不存在
配置文件有就近原则：全局与局部配置有重复，局部优先级高
练习：
(1)创建新组件 /pages/profile/profile 个人中心
(2)将组件添加 tabbar中

  "tabBar":{
        "list":[
            { 
              "pagePath":"pages/profile/profile", 
              "text:"个人中心",               
              "iconPath":"",           //默认图片
              "selectedIconPath":""    //选中图片
            }
        ]
     }

(3)在profile组件中onLoad事件触发时跳转 /pages/index/index?id=9

  onLoad: function () {
    wx.redirectTo({
      url: ' /pages/index/index?id=9',
    })
  },

(4)index 组件获取 id 输出

  onLoad: function (options) {
    console.log("跳转成功")
    console.log(options);
  },