一、开发前准备
申请账号、安装开发者工具
二、文件与目录结构
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文件内，然后引入这个文件，类似于js
tool.wxs
function 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.js
Page({
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.js
Page({
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:”
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这个值，也可以传递对象过去，作为第二个参数
