微信小程序基础理论

1.微信小程序全局配置文件

　　全局配置文件app.json

　　　　pages：用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件　　　　                            进行处理。app.json 中最上面的一个页面路径为小程序的默认入口页面。

　　　　window：用于设置小程序的状态栏、导航条、标题、窗口背景色。

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

   　　　　　　　  "navigationBarBackgroundColor": "#fff",导航栏背景颜色，如 #000000

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

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

　　　　　　　　  "enablePullDownRefresh":true,是否开启当前页面下拉刷新。
　　　 tabBar 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，
　　　　　　　　以及 tab 切换时显示的对应页面。tabBar 配置项用于在小程序底部导航菜单的生成　　　　　　　　
　　　　　　　　"tabBar": {"list": [
　　　　　　　　　　{"pagePath": "pages/index/index","text": "张三","iconPath": "/tabBarImg/personal.png","selectedIconPath": "/tabBarImg/personal-active.png"},
　　　　　　　　　　{"pagePath": "pages/demo/demo","text": "李四","iconPath": "/tabBarImg/store.png","selectedIconPath": "/tabBarImg/store-active.png"}
　　　　　　　　]},　　　　

2.生命周期函数

　　onLoad: 页面加载

　　　　一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
　　onShow: 页面显示
　　　　每次打开页面都会调用一次。
　　onReady: 页面初次渲染完成
　　　　一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
　　onHide: 页面隐藏
　　　　当navigateTo或底部tab切换时调用。
　　onUnload: 页面卸载
　　　　当redirectTo或navigateBack的时候调用。

3.请求数据时

　　在页面加载请求数据时，会在onLoad或者onShow中请求数据。

4.渲染

　　列表渲染   

　　　　　　<view wx:for="{{array}}"> {{item}} </view>

　　　　　Page({data: {array: [1, 2, 3, 4, 5]}})

　　条件渲染    

　　　　　　<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>

　　　　　　<view wx:elif="{{view == 'APP'}}"> APP </view>

　　　　　　<view wx:else="{{view == 'MINA'}}"> MINA </view>

　　　　Page({ data: {view: 'MINA'}})

4.数据绑定

　　绑定某个变量的值为元素属性时，会用两个大括号括起来，如果不加括号，为被认为是字符串。

5.显示与隐藏元素

　　小程序中，使用 wx-if和 hidden控制元素的显示和隐藏

6.事件处理

　　小程序中，全用 bindtap=“”，或者 catchtap=‘’绑定事件，catchtap阻止事件冒泡。

7.数据双向绑定

　　在小程序中，当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过 this.setData({key:value})来将表单上的值赋值给 data中的对应值。

8.绑定事件传参

　　在小程序中，不能直接在绑定事件的方法中传入参数，需要将参数作为属性值，绑定到元素上的 data-属性上，然后在方法中通过 e.currentTarget.dataset.*的方式获取，从而完成参数的传　　　　　　　　        递。

9.父子组件通信

　　1)在小程序中需要：

　　　　1、编写子组件

　　　　2、在子组件的 json文件中，将该文件声明为组件；

　　　　3、在需要引入的父组件的 json文件中，在 usingComponents填写引入组件的组件名以及路径；

　　　　4、在父组件中，直接引入即可

　　　　

 

 

 　　　　

 

 

 　　　　2)如果父组件想要调用子组件的方法

　　　　　　小程序是给子组件添加 id或者 class，然后通过 this.selectComponent找到子组件，然后再调用子组件的方法。

 

 　　*个人随笔记录，不喜勿喷