小程序开发教程笔记(一)

简介：此笔记用来记录学习小程序开发的心得体会总结

 

一、小程序的视图与渲染

    1.小程序组件的使用：

        打开微信小程序的官方开发文档，网址是：

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

        点击组件，就可学习微信提供的各种组件的使用方法

    2.数据绑定：

        在页面的js文件中定义，如下：            

        data:{

              text : "这里是内容",

              btnText : "这是按钮的内容",

              show : false,

              news : ['aaa','bbb','ccc','ddd']

            },

        然后在页面的wxml文件中使用，如下：

        <button type="default" hover-class="other-button-hover"> default </button>

        <button type="primary" bindtap="btnClick"> {{btnText}} </button>

        动态修改页面内容，需要在页面的js文件中设置按钮的点击事件，如下：

        btnClick : function (){

                console.log("按钮被点击了")                                                                         //点击按钮后在调试台中打印

                var isShow = this.data.show;                                                                       //将show的值赋给isShow

                var newsdata = this.data.news;                                                                  //将news的值赋给newsdata

                newsdata.shift()                                                                                         //删除数组中的第一个元素

                this.setData({text:"这是一个新的内容...",show:!isShow,news:newsdata})   //每次点击按钮都会将show的值取反和删除new数组的第一个元素

           }

    3.渲染标签：

        微信小程序给我们提供了两种渲染标签：条件标签和循环标签

        条件标签在页面的wxml文件中定义，如下：

        <view wx:if="{{show}}" >{{text}} 1 </view>     //当show=true时显示text 1的内容，false显示text2的内容

        <view wx:else >{{text}} 2 </view>

        循环标签在页面的wxml文件中定义，如下：

        <view wx:for="{{news}}" wx:for-item="itemx" wx:for-index="ix">   //循环news数组，将数组的元素赋给itemx ，将数组的索引赋给ix

            {{ix}} - {{itemx}}                                                                               //依次显示itemx和ix的值

        </view>

    4.模板导入：

        我们可以将多个页面都有的内容独立出来做成一个模板，在设计页面时直接导入该模板，方便快捷

        新建一个wxml文件作为模板，内容随意。

        然后在页面中添加该模板，如下：

        <include src="../templates/header" />

        或者

        <import src="../templates/footer" />

        <template is="footer2" data="{{text:'导入设置的内容...'}}" />    //选用template名字为footer2的内容

二、小程序事件

     1.什么是事件？

            事件是一种用户行为，也是一种通讯方式。

    2.事件的类别

            点击事件：tap

            长按事件：longtap

            触摸事件：touchstart、touchend、touchmove、touchcanel

                             touchend事件和touchcanel事件的区别是：touchend是用户手指离开触摸屏，表示触摸结束。

                                                                                                touchcanel是当用户手指没有离开触摸屏，但当前界面被其他界面覆盖了，比如通话界面，表示触摸取消。

            其他事件：submit、input ......

    3.事件的冒泡

            冒泡事件是指当我们点击了子view的时候，会同时触发它的父view事件

            冒泡事件有点击事件、长按事件和触摸事件，其他都是非冒泡事件

    4.事件的绑定

            事件的绑定有bind绑定和catch绑定，一般都使用bind绑定

            catch绑定的作用是将事件变为非冒泡事件

    5.事件的对象

            类型type

            时间戳timeStamp

            事件源组件target

            当前组件currentTarget

            触摸点数touches

三、小程序的配置详解

    学习的时候需要打开微信公众平台的开发文档

     网址：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

       1.app的页面配置

            打开项目目录下的app.json文件

            在pages中设置需要显示的页面路径

            默认放在最上面的页面是首页

     2.app的窗口配置

            打开项目目录下的app.json文件

            在window中设置小程序的状态栏、导航条、标题、窗口背景色

            常用的几种属性如下：

                    "backgroundTextStyle":"light",                    //  下拉 loading 的样式，仅支持 dark / light

                    "navigationBarBackgroundColor": "#fff",    // 导航栏背景颜色

                    "navigationBarTitleText": "WeChat",           // 导航栏标题文字内容

                    "navigationBarTextStyle":"black"                //  导航栏标题颜色，仅支持 black / white

     3.app的tabBar配置

             当小程序有多个页面需要切换显示时，可以配置tabBar底部菜单栏来实现

             tabBar也是在app.json中设置，它的使用方法如下：                       

"tabBar": {                            

"list": [{                            //只能配置最少2个、最多5个 tab。tab 按数组的顺序排序，每个项都是一个页面

"pagePath": "pages/index/index",

"text": "首页"

}, {

"pagePath": "pages/logs/logs",

"text": "日志"

}]

},

其中tabBar的属性有：

color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	tabBar的位置，仅支持 bottom / top

其中list的属性有：

    pagePath:页面路径，必须在 pages 中先定义

    text:tab 上按钮文字

    iconPath:图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 postion 为 top 时，不显示 icon。

    selectIconPath:选中时的图片路径

     4.网络超时配置及debug开启配置

            这个功能主要用于调试，使用方法如下：                

"networkTimeout": {

"request": 10000,

"downloadFile": 10000

},

"debug": true

     5.页面配置

         每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。

         页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。