微信小程序的使用教程

一，首先我们要去安装一个微信开发者工具

微信开发者工具下载

二，注册一个微信小程序（生成ID）

注册链接

注册好之我们打开开发管理——开发设置——复制App的ID

三，打开微信开发者工具

按图示填写完整之后，我们点击确定，这样你就创建好了一个小程序的项目，接下来我们来看看如何使用的

四，基本语法

在微信小程序里面，目前我们最常用的标签有

<view>块级标签<view> //相当于html中的div标签

<text>行内标签</text> //相当于html中的span标签

//wxml中：
<button type="primary" size="mini" bindtap="tapHd">你好</button> //跟js中的button一样bindtap是为按钮绑定事件
//js中：tapHd(e){console.log(e);var msg =e.target.msg;wx.showToast({title:"你好"})},

五，事件传参

1，在wxml文件中设置一个按钮，然后给按钮添加data-msg，

<button type="primary" bindtap="sayHi" data-msg="吴彦祖">按钮1</button>

2，在js文件里面我们可以接收到按钮传递过来的“吴彦祖”，不过值添加在了dataset.msg中

  sayHi(e){console.log(e.target.dataset.msg);var msg =e.target.dataset.msg;wx.showToast({title:'你好'+msg,})},

这样当我们点击按钮1的时候会弹出你好吴彦祖！

六，页面传参

1，在event页面中，我们定义一个按钮，然后给按钮添加一个点击事件，每次点击num的值加5；

,2，然后我们在nav页面中也声明一个按钮，去接收event页面中传递过来的值

setData({num:app.globalData.num})是用来更新数据的,参数是一个对象

七，表单双向绑定

1，在wxml文件中

<input type="text" value="{{val}}" bindinput="xiugai" class="ipt"/>
<button type="primary">{{val}}</button>

2，在js文件中

  xiugai(e){var val =e.detail.value;this.setData({val:val})},data: {val:"小程序很简单",name:"18",age:"20"},

这样当我们修改input输入框中的值时，按钮的val值也会跟着发生改变

八，页面切换

1，使用button按钮进行页面切换，data-type有两种类型，

navigate：跳转到其他页面后会出现后退箭头，点击之后可以返回
redirect：重定向，跳转之后不能进行返回

<view><button size="mini" type="primary" bindtap="goEvent" data-type="navigate">跳转到event</button><button size="mini" type="warn" bindtap="goEvent" data-type="redirect">跳转到event(替换)</button>
</view>

  goEvent(e){var type=e.target.dataset.type;if(type=="redirect"){wx.redirectTo({url: '/pages/event/event',})}else{wx.navigateTo({url: '/pages/event/event',})}},

2，使用navigator进行页面跳转
使用navigator时，open-type属性有四种：

navigate:普通跳转，跳转之后还能返回
redirect:重定向跳转，切换之后不能返回
reLaunch：重启
navigateBack：返回按钮

<view><navigator open-type="navigate" url="/pages/event/event?name=李海飞&age=18">点我跳转</navigator>
</view>
<view><navigator open-type="redirect" url="/pages/event/event?name=吴彦祖&age=20">跳转并替换</navigator>
</view>
<view><navigator open-type="reLaunch" url="/pages/event/event">点我重启</navigator>
</view>
<view><navigator open-type="navigateBack">点我返回</navigator>
</view>

跳转并把参数传递过去

九，tabBar的使用

小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/api/
1,，直接搜索tabBar

2，我们将这段代码粘贴到我们的app.json文件当中

iconPath：为底部栏的字体图标样式，没有的话可以去阿里图标库里面去下载，selectedIconPath为点击后的样式，pagePath的路径就是pages的路径

十，对request数据请求的封装

我们为什么我对request进行封装？

可以添加请求头
可以添加加载提示
可以统一对错误进行处理

1，首先要现在utils文件夹下建立一个request文件

2，然后开始进行封装

//基础的url
const URI = {baseURL:'http://dida100.com'
}
//{name:"mumu",age:18} => name=mumu&age=18
function tansParam(obj){var str = '';for(var k in obj){str+=k+'='+obj[k]+'&';}//移除最后一个&return str.slice(0,-1);
}
function request(option){var url = option.url;//01 可以添加baseURlurl= url.startsWith('http')?url:URI.baseURL+url;//选项里面有params （get 传入的参数）if(option.params){//如果 有参数，把参数转换为url 编码形式加入url+='?'+tansParam(option.params);}//02 可以添加请求头var header = option.header || {};header.Authorization = 'Bearer '+wx.getStorageSync('token');//03 可以添加加载提示if(option.loading){wx.showToast({title: option.loading.title,icon:option.loading.icon,})}//返回一个promisereturn new Promise((resolve,reject)=>{wx.request({//请求的地址如果 --- http开头 直接用url 不是http开头，添加baseURLurl: url,method:option.method||'GET', //请求的方法  默认getdata:option.data,//post 传入的参数success(res){//请求成功resolve(res.data);},fail(err){//04对错误进行处理wx.showToast({title:"加载失败",icon:'none'})//请求失败reject(err)},complete(){//关闭加载提示wx.hideToast()}})
})
}
//定义get简易方法
request.get=(url,config)=>{return request({url,method:"get",...config})
}
//定义post简易方法
request.post=(url,data,config)=>{return request({url,method:"post",data,...config})
}
//导入request
module.exports={request}

3，封装好之后，我们再建一个api文件夹，在api文件夹下面创建一个api.js文件，专门存放我们封装好的方法

4，然后我们就可以直接在文件中调用方法