微信小程序基础

一.微信小程序

    1.微信公众号平台

        当做浏览器看待

    2.小程序

        pages：存放需要展示的页面

            一个页面对应一个文件夹，一个页面有四个文件组成（四个文件名字一样，后缀不一样）：

                .js：负责描述对象行为，业务逻辑

                .json：页面配置描述文件

                .wxml：页面骨架，相当于html文件

                .wxss：样式文件，相当于css文件

        utils：存放工具文件，utils.js文件就是工具文件，提供一些公用的方法

        外层三个app文件：

            用于描述整个应用程序的状态，没有对应的wxml文件，他们是应用程序的入口文件

            app文件只能有一个，并且不能重命名

            app.js：全局js文件，如果想要使用app.js中的内容，可以使用const app = getApp() 方法获取

            app.json：全局配置文件

            app.wxss：全局的样式表文件，如果页面中的wxss文件有相同的样式设置，则会就近原则，执行页面中的样式

            pqoject.config.json：项目配置文件，一般情况不需要修改

            eg：appid

            打开一个已有项目时，自动导入这些项目配置信息

        注意：

            以上的目录结构，index是一级目录，向下延伸，不超过五级。是小程序为了保护它简单的业务逻辑所人为设置的限制

            index是一级目录，logs是二级目录，因为从index跳转到logs页面中

    3.调试

        不需要笔记

    4.小程序的flex布局（弹性布局）

        小程序有两种布局方法（block+flex）对象

        view 视图就是默认的block布局，所有不说了

        flex布局：

https://blog.csdn.net/maindek/article/details/83307804

            要使用flex布局的话需要显示的声明（给父元素）：display:flex;

    5.组件：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

        view：功能类似于html中的div 容器，分割文档

        text：相当于span，文本组件，selectable='true'文本长按选中

        app.json：文件中全局配置信息，https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

        注意：.json文件中不允许出现注释

        image：相当于img，src属性给个路径

            注1：image组件默认宽度300px、高度225px 注2：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别。

    6.事件绑定：

        bindtap：点击事件绑定，事件冒泡

        bindlongtap：长按事件绑定

        bindtouchcancle：触摸事件取消

        bingtouchstart：触摸事件开始

        bindtouchmove：触摸移动事件

        bindtouchend：触摸结束事件

        阻止点击事件冒泡:

            catchtap：点击事件绑定，阻止事件冒泡

    7.rpx

        小程序单位使用rpx，因为px是物理像素大小，而针对手机是有逻辑上的分辨率概念

        逻辑像素 : 物理像素 = 1 : 2  苹果    1 ： 1.5 安卓

        如果想要使用px做单位，那就除以2或1.5

        如果使用px设置单位，想让所有设备都能大小自适应是做不到的

        建议实际使用iphone7 750px宽度作为设计效果图，将单位使用rpx就可以做到效果图与设备1 ：1适应显示

    8.swiper

        滑动视图

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

            父视图使用 swiper

            子视图使用 swiper-item4vertical="{{false}}"控制纵向操作，这里true或false 一定要写{{}}

    9.生命周期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0

    10.页面跳转

        wx.navigateTo(Object,Object)

            保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。

        小程序提供了一些页面（路由）跳转的方法:wx.navigateTo(),wx.redirectTo(),wx.switchTab()

        注意：目前页面路径最多嵌套十层

        wx.navigateTo():可以跳转到任何页面，但是不能跳转到tabbar页面

        wx.redirectTo()：页面重定位，原来页面就没了

        wx.switchTab()：想要跳转tabbar页面，从任何页面跳转到tabbar页面

        wx.navigateTo({

            url:'string',

            success:function(res){

                //seccuess

                //res获取数据

            },

            fail:function(err){

                //fail

            },

            complete:function(){

                //无论成功失败都做的事

            }

        })

        页面跳转传参：

            A页面 --> B页面

            A：url：'B?a=100'

            B:onload:function(options){

                console.log(options.a)   //100

            }

        wx.navigateTo()和wx.switchTab()会触发onHide()事件

        wx.redirectTo()触发onUnload()事件

    11.模板

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

        <template name='popstItem'></template>

        name：模板的名字，被调用时使用

        调用模板：

            <import src='post-item/post-item-template.wxml'/>   //引入

 

             <view catchtap='onPostTap' data-postId='{{item.postId}}'><template is="postItem" data="{{...item}}"></template></view>

             注意：不能再template上加时间，因为.wxml在编译过后会将template替换掉，template不是标签，而是一个占位符

    12.数据绑定：

    数据绑定适应Mustache 语法(双大括号)将变量包起来

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

        // 小程序中的数据绑定总会来data中拿数据，我们称这个动作为A

        // 动作A 的执行时在onLoad函数执行之后发生的

        // 所以data中的数据一般是在onLoader函数中设置的

        onLoad函数参数用于接受其他页面传递的数据

        //setData({})  转义用来设置data数据的

        this.setData({

            a:100,

            b:200

        })

    13.block （列表渲染）

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

        <block></block>可以认为是for循环后边的大括号，是一个循环体的语句整体

        <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx"></block>

        item是循环变量 idx是循环下标

    14.data-

        data-postId：data-开头 + 自定义单词 = 自定义属性

        自定义postId属性

        data-postId-name-yyyy

    15.   ...item

        ...：相当于展开了某个对象,将这个对象展开以后，在.wxml中调用时就不需要用item调用{{item.avatar}},写了...就可以直接{{avatar}}

    16.事件对象

        event.currentTarget  指的是事件捕获的组件

        event.target  指的是当前真正点击的组件

    17.wx:if

        wx:if

            在框架中，使用wx:if="{{condition}}"来判断是否序言渲染该代码块

                如果condition = true渲染当前代码块

        block wx:if

            wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

                注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

        wx:if vs hidden

            wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

    18.背景音乐

        var backgroundAudioManager = wx.getBackgroundAudioManager();

        //开始播放

            backgroundAudioManager.src = postData.music.url;

            backgroundAudioManager.title = postData.music.title;

            backgroundAudioManager.coverImgUrl = postData.music.coverImg;

            backgroundAudioManager.play();

        //暂停播放

             backgroundAudioManager.pause();

        博客地址：

https://blog.csdn.net/u012729832/article/details/79745090

    19.getCurrentPages()

        getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

        注意：

            不要尝试修改页面栈，会导致路由以及页面状态错误。

            不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

    20.本地缓存：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html

        wx.setStorage(Object object)

            将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。数据存储上限为 10MB。

    21.显示弹出框

        wx.showToast({

            title:postCollected ? '收藏成功' : '取消成功',

            duration:1000,       //延迟时间

            icon:'success'       //显示图标

        })

    22.wx.showActionSheet(obj) 显示一个操作菜单

        从窗口底部向上划出一个列表框，可以进行选择

        提示：小程序是不能播放本地音乐，只能播放流媒体音乐，限制大小为1MB

https://developers.weixin.qq.com/minigame/en/dev/api/ui/interaction/wx.showActionSheet.html?wx.showActionSheet

    23.tabbar

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

    24.scroll-view：可滚动视图区域：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

        movable-view ：的可移动区域

        cover-view：覆盖在原生组件之上的文本视图，

    25. wx.request({

            url: url,

        })

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

    26.icon

        图表

            type    String        icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

    27.表单元素事件绑定：

https://developers.weixin.qq.com/miniprogram/dev/component/input.html