微信小程序笔记

定义

微信里面app

    16年推出
    竞品：支付宝小程序，钉钉，美团，头条，抖音qq小程序

优点
    在微信自由分享
    不用下载app
    能快速的开发，使用微信的api接口

开发者
    内存，源码，图片，存储，接口与数据都有限制

网址
    注册一个微信小程序
        https://mp.weixin.qq.com/wxopen/waregister?action=step1

    下载微信小程序开发工具
        https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

项目组成

小程序的模板语法约等于vue的模板语法

文本渲染

        {{ msg}}
        可以执行简单的js表达式
            {{2+3}}
            {{msg.length}}

条件渲染

        wx:if=""
        wx:elif=""
        wx:else

列表渲染

        wx:for="{{list}}" wx:key="index"
            {{item}}
            {{index}}

自定义列表渲染

        定义item与index的名称
        ｜ wx:for="{{list}}}"
        ｜ wx:for-item="myitem"
        ｜ wx:for-index="myidx"
        ｜ 
        ｜ {{myidx}}
        ｜ {{myitem}}
        ｜ 

导入

        import
            只能导入template内容
            template/utils.wxml
            home.wxml
                ｜ <template name="userCart">
                ｜   用户名：{{name}}
                ｜ </temlate>
                <import src="/template/utils.wxml">
                
                <tempate is="userCart" data="{{...u1}}">


        include
            只能导入非template内容
            template/foot.wxml
                {{内容}}

            home.wxml

wxss

    默认单位是rpx
    750rpx等于一个屏幕的宽 375就是50%的宽

事件

    bindInput 表单输入时
    bindconfirm 表单输入确认
    bindtap 点击时候

事件的传参

    <button data-msg="xxx" bindtap="tapHd">
    获取事件的参数e.target.dataset.msg

表单的绑定

    <input value="{[s1})" bindinput="inputHd">
    inputHd(e){this.setData({s1:e.detail.value)}
    表单的值获取: e.detail.value

内置的api

    showToast 显示提示
    
    ｜ 本地存储
    ｜ wx.setStorageSync(key,value)
    ｜ 本地取
    ｜ wx.getStorageSync(key)
    ｜ 
    wx.request 网络请求

生命周期

    onLoad页面加载完毕

更新数据与视图

    this.setData({k:v})

todo

    设计数据list存储数据
        
        ｜ {
        ｜ done:true,是否完成
        ｜ title：”“显示的文本
        ｜ }
        ｜ 

    temp
        和输入框进行双向绑定的临时数据

    方法
        添加
        删除

内置组件

    view组件 块组件
    text 组件 行内组件

页面配置

"enablePullDownRefresh": true,  //允许下拉刷新
"backgroundTextStyle": "dark", // 背景文字颜色
"backgroundColor":"#f70", //背景颜色
"usingComponents": {} //组件

小程序的限制

    源文件大小
        每个包不能超过2M
        总共不能超过16-20M

    页面缓存堆栈5层
    底部栏
        最少2个最多5个
        底部栏图片31k

    功能和微信一致（右上角胶囊按钮，下拉刷新。。。)
    本地存储 1次1M最多100M
    setData o不能超过1M

小程序的页面跳转

    <navigator>
        url 跳转的地址
        open-type 
        打开类型
            navigate 普通跳转
            navigateBack 返回
            redirect 重定向
            switchTab 跳转底部栏
            reLaunch 重启

api跳转

        wx.navigateTo 跳转
        wx.switchTab切换底部栏
        wx.redirect重定向wx.reLaunch重启

页面栈

    A页面   B 页面  C 页面   D 页面  E 页面

    通过 open-type = "navigate" 页面会缓存起来  最多缓存5层
    A页面->redirect B页面  A页面是不会被缓存
    E 页面  "navigateBack" 到 D页面   （页面的缓存移除一次）
    总结：navigate会增加一层缓存页面  redirect 会替换一层缓存页面  navigateBack 会移除一层缓存页面

页面传参

    小程序页面传参主要通过 查询传参
    传：url=“xxxx/xxx?name=mumu&age=18”
    接收：onLoad options参数接收
        options.name   options.age

底部导航配置

 "tabBar": {
 "color": "#777",
 "selectedColor": "#1cb9ce",
 //list内至少2个导航
 "list": [
 {
 "pagePath": "pages/yidian/yidian",
 "text": "一点",
 "iconPath": "",//图片路径
 "selectedIconPath": ""//图片路径（选中状态）
 },
 {
 "pagePath": "pages/nav/nav",
 "text": "跳转",
 "iconPath": "",
 "selectedIconPath": ""
 }
 ]
 },

全局数据

    app.js的globalData
        定义
            app.js的globalData

        页面使用
            var app  = getApp();
            app.globalData.num


    本地存储

npm安装包

    初始化项目 
        npm init -y

    安装插件
        npm i @vant/weapp -S --production

    app.json删v2（整行）
    修改project.config.js

{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}

        注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

封装request；

 //基础的url
 const URL={
   baseURL:"http://dida100.com"
 }
 // {name:"mumu",age:18} => name=mumu&age=18
 function tansParam(obj){
 var str="";
 for(var k in obj){
 str+=k+"="+obj[k]+"&";
 }
 //移除最后一个&
 return str.slice(0,-1);
 }
 function request(option){
 var url=option.url;
 // 01 可以添加baseURL
 //请求的地址如果以http开头直接用url，不是http 添加我们baseURL
 url=url.startsWith("http")?url:URL.baseURL+url;
 //选项里面有promise
 if(option.params){
 // 如果有参数，把参数转换为url编码形式加入
 url+="?"+tansParam(option.params);
 }
 // 02 可以添加请求头
 var header=option.header||{};
 header.Authorization="Bearer "+wx.getStorageSync('token');
 // 03 可以添加加载提示
 if(option.loading){
 wx.showToast({
       title: option.loading.title,
       icon:option.loading.icon,
 })
 }
 // 返回一个promise
 return new Promise((resolve,rejects)=>{
 wx.request({
 //请求的地址如果以http开头直接用url，不是http 添加我们baseURL
       url:url,
       method:option.method||"GET",//请求的方法 默认get
       data:option.data, //post出入的参数
 header,
 success(res){
 //请求成功
 resolve(res.data);
 },
 fail(err){
 //请求失败
 uni.showToast({title:"加载失败",icon:"none"})
 rejects(err);
 },
 complete(){
 //关闭加载提示
 wx.hideToast();
 }
 })
 })
 }
 request.get=(url,config)=>{
 return request({url,method:"get",...config})
 }
 request.post=(url,data,config)=>{
 return request({url,method:"post",data,...config})
 }
 // 导出request
 module.exports={request}

分包

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

网络

1. 小程序请求的地址必须https
2. 小程序请求的地址必须和后台约定的

如果不没有使用约定的地址(只能测试不能上线)
手机中测试 右上角三个点击打开调试
重启后网络请求

微信的生命周期

小程序生命周期

onLaunch 启动（本地存储，登录）
onShow前台展示开始播放与运行
onHide后台运行（停止播放与运行）
onError发生错误（监听处理错误）

页面的生命周期

生命周期
onLoad 加载完毕（获取页面传参，初始化，网络请求，本地出错）
onReady首次渲染完毕（获取节点）
onShow前台显示
onHIde后台运行
onUnload 页面被卸载

固定回调函数

onPullDownRefresh 下拉属性
在json中配置
enablePullDownRefresh
停止下拉刷新
wx.stopPullDownRefresh()
onReachBottom 上拉触底
onShareAppMessage 右上角分享
onShareTimeline 分享到朋友圈
onPageScroll 页面滚动
e.scrollTop
页面滚动的距离

wx.pageScrollTo({
      duration: 600,
      scrollTop:0,
    })

将页面滚动到指定的位置
也可以指定滚动到指定的元素
onTabItemTap 页面底部栏被点击

button的

开放能力
open-type：
share 触发分享
getPhoneNumber 获取用户的手机号
getUserInfo 获取用户信息
chooseAvatar 获取用户的头像

节点信息

创建一个选择器 const query = wx.createSelectorQuery()
选中h1节点 获取他的边界 query.select(‘.h1’).boundingClientRect()
选中所有h1节点 获取他的边界 query.selectAll(‘.h1’).boundingClientRect()
获取窗口的位置信息 query.selectViewport().scrollOffset();
执行查询操作放回结果 query.exec(function(res){})

组件

组件的样式

样式的隔离

	options:{
    // 样式隔离：apply-shared 父影响子，shared父子相互影响， isolated相互隔离
    styleIsolation:"isolated",
},

外部类

	externalClasses:["cell-class"],
	<view class="cell cell-class">我是cell组件</view>
	页面中
		<cell cell-class="mycell"></cell>

mycell{
line-height: 120rpx !important;
color:#F70;
}

组件的插槽

默认插槽
	父组件

<cell>
      <text>插槽内容</text>
</cell>

	子组件

<view><slot></slot></view>

命名多插槽
	父组件

<cell>
    <text slot="pre"> 🚒</text>
    <text slot="next">🥗</text>
</cell>

	子组件

options:{ multipleSlots:true}

<view>
    <slot name="pre"></slot>
    <slot name="next"></slot>
</view>

组件的传参

父传子
	property
子传参父
	triggerEvent

自定义组件Component

生命周期  lifetimes
   attach  组件的挂载
data 数据
methods 方法
properties 属性（只读）
externalClasses 外部类
options选项
	multipleSlots:true 多个插槽
	styleIsolation:"isolated" 组件的样式格式

自定义组件生命周期

组件的生命周期  lifetimes
	created 创建
		此时还不能调用 setData
	    attached 挂载  
	    detached 卸载
页面的生命周期  pageLifetimes
	   show 显示
	   hide 后台运行
	   resize 尺寸变化