一、开发前准备

申请账号、安装开发者工具二、文件与目录结构1、程序主体：app.jsapp.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'    }})要输出到页面上，直接就是
    
     {
   {name}}
    即可

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

Page({    data:{         names:[ 'kate','jim','lily' ],        age:['1','2','3']    }})
    
     {
   {item}}
    

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

    
     等级B
     
    
     等级C
    
    
     等级A
    

4、块级渲染block，block是虚拟组件，不会出现在页面上

同时显示多个元素

        
     
      {
   { name }}
         
     
      {
   { score }}
         
     
      等级A
     
    
        
     
      {
   { name }}
         
     
      {
   { score }}
         
     
      等级B
     
    

5、使用模板

Page({    data:{         names:[ 'kate','jim','lily' ],        age:['1','2','3'],    score:80,    name:'aaa'    }})先定义模板：
    
     
     使用：
        
         
         
      //data="{
   {name,score}}等价于data="{
   {name:name , score:score}}
    

6、import与include

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

六、事件

绑定事件

        
     
      点击
     
    tabHandle(event){    //event：是事件对象，里面有detail等属性    //target：事件从哪里触发的    //currentTarget：事件在哪个上面执行的，通过event.currentTarget.dataset.name可以获取到到"容器"这个自定义值    //比如点击text，那么target就是text，currentTarget是外面的view，因为冒泡了，所以尽管点击text，tabHandle事件仍然会触发}如果要阻止事件冒泡，那么就使用catch，而不是bind，如：
        
     
      点击
     
    

这样点击text，tabHandle事件仍然会触发，但是view上一级就不会冒泡上去了，因为阻止冒泡了

七、样式wxss尺寸单位：rpx，只要设置宽度为750rpx，那么不管在什么手机上都是占满一整个屏幕引入样式：@import '../style.wxss'全局样式与局部样式：定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。八、微信小程序脚本语言wxs不支持es6的语法，就当成es5的javascript

定义(写在模板页面内)：
    
           function createName(names){        return names.split(',')    }    module.exports = createName    //tool就表示导出的函数createName
    使用：
    
     {
   {item}}
    也可以将wxs代码写在一个单独的.wxs文件内，然后引入这个文件，类似于jstool.wxsfunction createName(names){        return names.split(',')    }module.exports = createName模板页引入：
    使用：
    
     {
   {item}}
    

九、更新页面data数据

data:{    number:1}onTap(){    this.data.number = 2;  //错误    this.setData({        number:2;  //正确    })}

总结：使用setData可以更改data里面的数据（同步更新），然后视图也会更新（异步更新）

不是更改一个data，视图就马上更新，而且确定data不会更改之后，将所有更改的data一次性渲染到视图（尽管是异步更新，时间间隔仍然很短）

十、组件

页面由组件组成view、text就是一个组件，只不过没有样式看文档学习微信小程序内置组件

十一、自定义组件

举例说明：新建magicNumber.组件首先：创建magicNumber.文件夹，里面创建magicNumber.wxml、magicNumber.wxss、magicNumber.js和magicNumber.json文件

magicNumber.wxml文件：
    
             {
   {nowIn}}    
     
      {
   {magicNumber}}
         
     
      点击显示magicNumber值
     
    magicNumber.json文件：{    "component":true}magicNumber.js文件：这里是注册组件，不是注册页面，所以不能是Page({})，而是：Component({    properties:{        nowIn:String    },    data:{        magicNumber:Math.random(),    },    attached(){  //默认一上来就触发一次getMagicNumber事件，这样父组件监听到触发了，也会马上触发他的getMagicNumberHandle事件，所以一上来就默认更新了        this.triggerEvent('getMagicNumber',this.data.magicNumber)    },    methods:{  //子组件的事件写在methods里面        onTap(event){            this.setData({                magicNumber:Math.random()            })            this.triggerEvent('getMagicNumber',this.data.magicNumber)  //第二个参数是传到父组件的值            //子组件向父组件传值，通过自定义事件，使用triggerEvent，告知父组件，该修改某个值了，点击的时候，传达一些信息过去，这里传过去this.data.magicNumber这个值，也可以传递对象过去，作为第二个参数            console.log(event.currentTarget.dataset.name)  //获取到data-name="文字"里面的"文字"        }    }})

组件注册完毕，接下来是在某个页面进行使用

假如在index页面使用，首先在index文件夹下面创建index.json文件，里面配置：

{  "usingComponents": {    "magic-number":"/pages/magicNumber/magicNumber"  }}使用：index.wxml

      
       
     
      {
   {num}}
     
    index.jsPage({    data:{        num:Math.floor(maN*1000)    },    getMagicNumberHandle(event){  //监听子组件的getMagicNumber事件，一旦触发了，马上做出回应                console.log(event.detail);  传过来的信息可以通过【事件对象】event.detail获取到                this.setData({                    num:Math.floor(event.detail*1000)  //这里就是处理了从子组件拿到的值                })        }})

十二、路由

两种方式实现导航的跳转1、navigator内置导航组件url：要跳转的页面地址open-type：跳转方式，有5种方式navigate：默认跳转方式redirect：重定向switchTab：跳到某个tabnavigateBack：回退reLaunch：重加载

• 页面切换，open-type="navigate"
  index.html

        
         
          About
         
         
          Movie
           
         
          Logs
           //tab切换
         
          回退
           //回退到上一个页面
         
          重定向到Movie
          上方有回退按钮
         
          reLaunch
          上方没有回退按钮
        

  ★logs属于底部tab，不可使用navigate跳转，只能使用下面的tab切换进行跳转

2、api跳转

wx.navigateTo(object) 跳转到wx.redirectTo(object) 重定向wx.switchTab(object) 跳到某个tabwx.navigateBack(object) 回退wx.reLaunch(object) 重加载

about.wxml
    
     使用api跳转到movie
    about.jsPage({    goMovie(){        wx.navigateTo({            url:'/pages/movie/movie'        })    }})

十三、授权与用户信息授权

• 获取用户昵称、性别，头像等等，需要在页面上先放置一个button，即授权button，用户点击确认之后才可以获取用户信息
  1、通过按钮来获取用户信息
  <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">获取用户信息</button>
  如果开始用户没有点击授权，会弹出一个弹框，用户可以选择授权或者不授权，点击授权，通过回调函数onGetUserInfo，里面有事件对象event，可以获取到用户的信息

2、通过普通点击事件获取

在用户未授权过的情况下调用此接口，将不再出现授权弹窗，会直接进入 fail 回调。在用户已授权的情况下调用此接口，可成功获取用户信息。所以，最好先使用button来获取用户信息

获取用户信息getUserInfo(ev){    wx.getUserInfo({        success:(msg)=>{            console.log(msg)        },        fail:(err)=>{            console.log(err)        }    })  }

★通过普通点击事件获取用户api，不会出现提醒授权弹框

• 获取其他信息，如位置等等的，需要先调取wx.authorize(object)的api，获取用户的授权， 然后再调用相关的api，直接获取信息，未授权先进行授权
  

案例：获取用户地理位置

授权位置  //这时候，仅仅是得到用户授权可以获取地理位置，具体的信息还一无所知，需要通过其他的api来获取最终的位置信息getAuthorize(){    wx.authorize({        scope:'scope.userLocation',        success:(msg)=>{            console.log(msg)        },        fail:(error)=>{            console.log(error)        }    })  }获取位置信息getLocation(){    wx.getLocation({        success:(msg)=>{            console.log(msg)        },        fail:(error)=>{            console.log(error)        }    })  }    获取授权信息  //查看哪些用户信息已经授权可以使用    getSetting(){        wx.getsetting({            success:(msg)=>{            console.log(msg,'授权相关信息')        }        })    }    打开授权信息面板  //用户第一次拒绝授权地理位置等信息，    //后续授权确认弹框将不再出现，这里可以手动打开授权信息面板，如图所示，用户手动设置完成之后回退回去，会执行下面的方法    openSetting(){        wx.opensetting({            success:(msg)=>{            console.log(msg,'设置相关信息完成')        }        })    }

十四、使用缓存

在movie页面缓存数据使用缓存，多个页面从而可以共享一些数据，但是使用起来需要慎重异步缓存数据：

缓存数据    wx.setStorage({            key:'name',  //缓存数据的键名            data:{  //可以是字符串或者对象                p1:'lin'            },            success:()=>{  //有回调函数，成功的时候才执行                console.log('存储名字成功');                wx.getStorage({  //获取缓存，可以同步或者异步                    key:'name',                    success:(data)=>{                        console.log(data)                    }                })            }        })    }

同步缓存数据：

wx.setStorageSync('names','kate');let names = wx.getStorageSync('names');console.log(names);

在about页面获取缓存数据，同步获取缓存数据

{
   {name}}获取namePage({    data:{        name:''    },    getName(){        let n = wx.getStorageSync('name');        console.log(n);        if(n){            this.setData({                name:n.p1            })        }    }})

移除缓存的数据，同步移除

<button bind:tap="removeName">移除缓存的name</button>removeName(){ wx.removeStorageSync('names');}

十五、请求与反馈，类似ajax，axios

    goRequest(){        wx.showLoading({ //一个loading动画，请求成功了会消失，下面已经定义了            title:'请求中'        });        wx.request({            url:''www.baidu.com,            data:{  //给服务器传递请求数据                name:‘joe’            },            methods:'post',  //默认是get请求            success:(res)=>{                console.log(res.data);                //请求成功的反馈                wx.showToast({                    title:'请求已经成功'                })                //请求成功隐藏loading                wx.hideLoading();            },            fail:(e)=>{                wx.showToast({                    title:e.errMsg                })            }        })    }

★详情-不校验域名合法域名

十六、微信小程序线上环境搭建

1、注册并且登录腾讯云-解决方案-微信小程序-关联账号2、上传代码

【总结】：

父组件向子组件传值，通过properties传值子组件向父组件传值，通过自定义事件，使用triggerEvent，告知父组件，该修改某个值了，点击的时候，传达一些信息过去，这里传过去this.data.magicNumber这个值，也可以传递对象过去，作为第二个参数

零碎知识点

1、对象被转为字符串就变成了[ object object ]2、VM1878:1 Component "pages/magicNumber/magicNumber" does not have a method "onTap" to handle event "tap".一直显示这个，因为把methods写在了data{}里面，作死！！3、微信开发者工具：清缓存可以清除用户登录信息