一、开发前准备
申请账号、安装开发者工具
二、文件与目录结构
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引入模板，在页面上什么位置写上，那么模板代码就在什么地方显示

六、事件
绑定事件

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

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

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

九、更新页面data数据

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

总结：使用setData可以更改data里面的数据（同步更新），然后视图也会更新（异步更新）
不是更改一个data，视图就马上更新，而且确定data不会更改之后，将所有更改的data一次性渲染到视图（尽管是异步更新，时间间隔仍然很短）

十、组件
页面由组件组成
view、text就是一个组件，只不过没有样式
看文档学习微信小程序内置组件
https://developers.weixin.qq.com/miniprogram/dev/component/

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

magicNumber.wxml文件：<view class="pressBtn" id="view" data-name="容器"> {{nowIn}} <view>{{magicNumber}}</view> <text id="text" data-name="文字" bind:tap="onTap">点击显示magicNumber值</text></view>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

<view class="container"> <magic-number now-in="首页" bind:getMagicNumber="getMagicNumberHandle"></magic-number> <view>{{num}}</view></view>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：跳到某个tab
navigateBack：回退
reLaunch：重加载

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

<view><navigator url="/pages/about/about" open-type="navigate">About</navigator><navigator url="/pages/movie/movie" open-type="navigate">Movie</navigator> <navigator url="/pages/logs/logs" open-type="switchTab">Logs</navigator> //tab切换<navigator open-type="navigateBack">回退</navigator> //回退到上一个页面<navigator url="/pages/movie/movie" open-type="redirect">重定向到Movie</navigator> 上方有回退按钮<navigator url="/pages/movie/movie" open-type="reLaunch">reLaunch</navigator> 上方没有回退按钮</view>

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

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

about.wxml<view bind:tap="goMovie">使用api跳转到movie</view>about.jsPage({ goMovie(){ wx.navigateTo({ url:'/pages/movie/movie' }) }})

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

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

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

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

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

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

案例：获取用户地理位置

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

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

<button bind:tap="onCache">缓存数据</button> 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}}<button bind:tap="getName">获取name</button>Page({ 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

<view bind:tap = "goRequest"></view>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、微信开发者工具：清缓存可以清除用户登录信息