微信小程序开发教程

一、开发前准备
申请账号、安装开发者工具
二、文件与目录结构
1、程序主体：
app.js
app.json 程序配置
1.1、程序配置

    pages 页面路径
     window 页面的窗口表现
     tabBar 底部tab切换
     networkTimeout
     debug
        {
                 "pages":[  //哪个写在上面，哪个就是入口文件
                        "pages/index/index",
                        "pages/movie/movie",
                        "pages/logs/logs"
                 ]
        }

app.wxss 公共样式
2、页面：
index.js
index.json 页面配置
2.1、页面配置
window 页面的窗口表现
index.wxss 页面样式
index.wxml 页面结构
三、注册程序与页面
1、注册app，只需要注册一次，可以得到一个程序的实例，可以被其他页面访问
在其他页面，通过getApp全局函数获取应用实例 const app = getApp(); 获取全局数据：app.gldData; //{a:1}

App({
    gldData:{ a:1 },
    onLaunch:function(){  //一运行小程序就会执行
        //初始化代码
    }
})
2、注册page，有几个页面，在每个页面内都需要注册
Page({
    data:{
        b:2
    },
    onLoad:function(){   //一进入页面就会执行
        console.log( this.data )  //{b:2}  通过this，获取单个页面内数据
    }
})

四、程序生命周期
1、App

App({

  //在小程序运行期间，只会执行一次
    //程序销毁之后(过了一段时间没有运行或者手动删除小程序)，再次启动小程序就会执行
    onLaunch(){
        console.log('小程序启动时执行')
    },
    //每次从后台切换出来就会执行
    onShow(){
        console.log('切换到小程序时执行')
    },
    //每次切换到后台就会执行
    onHide(){
        console.log('小程序被隐藏在后台时执行')
    }
})

2、Page

Page({
    //tab之间的切换，不会让页面重新加载，也不会卸载，只会让页面显示与隐藏
    //在进行NavigatorTo链接跳转的时候，目标页面会被加载onLoad，原始页面会被隐藏onHide
    //此时点击导航条上的回退按钮NavigatorBack，目标页面会onShow，不会onLoad，原始页面会被卸载onUnload

    //页面加载的时候执行，只会执行一次
    onLoad(){   },
    //页面第一次渲染完成之后执行，只会执行一次
    onReady(){  },
    //页面显示就会执行，会执行多次，比如tab切换从a页面切换到b页面，那么也就是等于b页面显示了
    onShow(){   },
    //页面隐藏就会执行，会执行多次，比如tab切换从a页面切换到b页面，那么也就是等于a页面隐藏了
    onHide(){   },
    //页面卸载的时候执行，只会执行一次
    onUnload(){ },
})

五、数据与列表渲染
1、数据在index.js里面的data里面定义，

Page({
    data:{ //数据类型，可以是字符串、数组、对象、数值等等
        name:'kate'
    }
})
要输出到页面上，直接就是<view>{{name}}</view>即可

2、渲染数组 wx:for wx:key

Page({
    data:{ 
        names:[ 'kate','jim','lily' ],
        age:['1','2','3']
    }
})
<view wx:for="{{names}}" wx:key="*this">{{item}}</view>

3、条件渲染 变量为true，即满足条件就进行渲染，反之就不进行渲染

<view wx:if="{{ score>60 && score<90 }}">等级B</view> 
<view wx:elif="{{ score<60 && score>0 }}">等级C</view>
<view wx:else>等级A</view>

4、块级渲染block，block是虚拟组件，不会出现在页面上
同时显示多个元素

<block wx:if="{{ score==80 }}">
    <view>{{ name }}</view>
    <view>{{ score }}</view>
    <view>等级A</view>
</block>
<block wx:else>
    <view>{{ name }}</view>
    <view>{{ score }}</view>
    <view>等级B</view>
</block>

5、使用模板

Page({
    data:{ 
        names:[ 'kate','jim','lily' ],
        age:['1','2','3'],
    score:80,
    name:'aaa'
    }
})
先定义模板：
<template name="myTemplate1">
    <view>我是模板</view>
    <view>{{name}}</view>
</template>

<template name="myTemplate2">
    <block wx:for="{{age}}" wx:key="*this">
        <view>{{item}}</view>   
        <view>啦啦啦</view>
    </block>
</template> 

<template name="myTemplate3">
    <block wx:if="{{score==80}}">
        <view>{{name}}</view>   
        <view>{{score}}</view>
        <view>等级A</view>
    </block>
    <block wx:else>
        及格
    </block>
</template> 

使用：
<view>
    <template is="myTemplate1" data="{{name:'kate'}}"></template>
    <template is="myTemplate2" data="{{age:age}}"></template>
    <template is="myTemplate3" data="{{name,score}}"></template> //data="{{name,score}}等价于data="{{name:name , score:score}}
</view>

6、import与include
可以把模板定义在专门的template.wxml里面
要使用里面的模板，只需要在对应的wxml里面
<import src="template.wxml"> //import引入的模板，你需要在页面上告知使用的是哪一个模板，<template is="myTemplate1" data="{{name:'kate'}}"></template>
<include src="template.wxml"> //include引入模板，在页面上什么位置写上，那么模板代码就在什么地方显示

六、事件

零碎知识点
1、对象被转为字符串就变成了[ object object ]