目录
一、全局配置
1.全局配置在app.json中设置
链接: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
2.底部TabBar的配置
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
必写属性:list
注:TabBar指向的页面在pages字段中需要放在其他页面之前,否则将不显示。
"tabBar": {
"list":[{
"pagePath":"pages/index/index",
"text": "首页",
"iconPath": "./images/home01.png",
"selectedIconPath": "./images/home02.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "./images/jornal01.png",
"selectedIconPath": "./images/jornal02.png"
}
]
},
全局配置和页面配置若出现冲突则以页面配置来显示。
二、网络请求
链接: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
1.发起请求
发起请求时要在小程序中设置信任该接口对应的域名
登录小程序官网 -> 开发管理 -> 开发设置 -> 服务器域名
注: 可在微信开发者工具app右上角详情中查看已配置域名:
实例:将百度域名设置为信任列表的域名
1.进入百度官网复制网址
2.进入小程序官网的上述服务器域名点击开始配置并扫码验证身份
3.将网址填入对应方框点击保存并提交
注:若需要使用ws、http等域名网址时,需要在app勾选不校验的选项。如图所示。(仅开发时使用)
三、网络请求案例
链接: https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
实例:发起get请求
###遇到的问题:无法识别npm
###解决方法:
1.查看环境变量是否配置好,cmd中输入node -v回车查看是否有版本号;
2.以管理员身份运行vscode。
无误后开始:
1.初始化npm
初始化成功后会生成package.json文件
npm init -y
2.导入常用的基本包
导入成功会生成node_modiles文件
npm i express nodemon -s
3.可选择是否配置nodemon
即将以上字段修改为:
"start": "nodemon app.js"
注:nodemon后跟的是创建的对应入口文件的名称。
4.调试运行
// 开启终端
npm run start
5.node后端代码
const express = require("express");//导入express包
const app = express();//创建实例
//启动本地4000端口
app.listen(4000, ()=>{
console.log("启动4000端口成功!");
})
//发起请求
app.get("/api/getData", (req, res)=>{
console.log(req.query);
res.send({
id:10086,
msg:"我收到你的get请求了。"
});
})
###查看端口是否正确开启:在浏览器中输入地址搜索
6.将地址复制到微信开发者工具中的js代码中
<!--pages/test/test.wxml-->
<button type="primary" bindtap="getData">发起get请求</button>
// pages/test/test.js
Page({
// 发起get请求
getData(){
wx.request({
url:"http://localhost:4000/api/getData",
method:"GET",
data:{
name:"kobe",
age:40
},
success(res){
console.log(res)
}
})
},
})
三、实例:发起post请求
1.node后端代码
const express = require("express");//导入express包
const app = express();//创建实例
//启动本地4000端口
app.listen(4000, ()=>{
console.log("启动4000端口成功!");
})
//解码
//提前处理请求传过来的数据
app.use(express.urlencoded({extended:true}));
app.use(express.json());
app.post("/api/postData", (req, res)=>{
console.log(req.body);//获取post请求提交来的数据
res.send({
id:10010,
msg:"我收到你的post请求了。"
});
})
2.小程序代码
<!--pages/test/test.wxml-->
<button type="primary" bindtap="postData">发起post请求</button>
// pages/test/test.js
Page({
// 发起post请求
postData(){
wx.request({
url:"http://localhost:4000/api/postData",
method:"POST",
data:{
name:"james",
age:37
},
success(res){
console.log(res)
}
})
},
})
注:若需要在加载页面时就需要加载以上数据,则可在js文件的onLoad函数中加入对应代码:
3.实例:简单首页
1.在app.json中新建home首页和test页面,pages中会自动生成页面。并将页面名字改为“首页”。
2.在vscode中新建public文件夹保存所需图片。
3.完整代码
<!--pages/home/home.wxml-->
<!-- 轮播区域 -->
// 顺序点,自动播放,轮播时间,无缝轮播
<swiper indicator-dots autoplay interval="2000" circular>
//通过id遍历轮播图片
<swiper-item wx:for="{{swiperImgList}}" wx:key="id">
//通过轮播图片地址显示图片
<image src="{{item.imgUrl}}"></image>
</swiper-item>
</swiper>
/* pages/home/home.wxss */
swiper{
height: 500rpx;
}
swiper image{
width: 100%;
height: 100%;
}
// pages/home/home.js
Page({
//页面的初始数据
data: {
swiperImgList:[] //轮播数据
},
//获取轮播图片
getSwiperImgList(){
wx.request({
url: 'http://localhost:4000/swiper',
method:"GET",
success:(res)=>{
// console.log(res);
// res接收到数据后不能直接传到小程序组件上,故先赋值
this.setData({
swiperImgList : res.data
})
},//箭头函数中的this是外部函数的this,其本身没有this
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//页面加载时立即发起请求获取轮播数据
this.getSwiperImgList();
},
})
// node后端----app.js
const express = require("express");//导入express包
const app = express();//创建实例
//启动本地4000端口
app.listen(4000, ()=>{
console.log("启动4000端口成功!");
});
app.use(express.static("./public"));//配置静态资源目录
//监听获取轮播数据的请求
app.get("/swiper", (req, res)=>{
let staticUrl = "http://localhost:4000/swiper/";
let imgArrData = [
{
id:1,
imgUrl:staticUrl + "swiper01.jpg"
},
{
id:2,
imgUrl:staticUrl + "swiper02.webp"
},
{
id:3,
imgUrl:staticUrl + "swiper03.webp"
},
];
res.send(imgArrData);//监听到请求后发送后端数据
})