微信小程序笔记

定义

微信里面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个导航