mpvue小程序实战项目开发记录篇(三)
十.项目需求分析
十一.项目开发
- 项目配置: tabBar的配置 统一接口地址配置 config/index.js
// 配置项
const host="http://localhost:5757";
const config={
host
}
export default config;
2.本地接口报错接口处理,报错如下
解决：微信开发者工具-->详情(勾选如下)
上线时再去掉该勾选
3.个人中心页面开发
腾讯云客户端sdk为小程序客户端开发提供 SDK 支持会话服务和信道服务。
wafer2-client-sdk的使用说明github地址
# my-project目录下安装腾讯云客户端sdk:
npm install wafer2-client-sdk -S
# 获取用户微信图像和昵称等个人信息：微信改版了要通过按钮去触发
methods:{
doLogin(){
// 设置登录地址
console.log(config.loginUrl)
qcloud.setLoginUrl(config.loginUrl);
qcloud.login({
success: function (userInfo) {
console.log('登录成功', userInfo);
utils.showSuccess("登录成功!");
wx.setStorageSync('userInfo', userInfo);
const user=wx.getStorageSync('userInfo');
console.log("存储",user);
},
fail: function (err) {
console.log('登录失败', err);
}
});
}
}
# 安装sass-loader 和node-sass
cnpm i sass-loader node-sass -S
4.mysql的基本操作
mysql -u root -p 密码 连接本地数据库
show databases: 显示数据库
use cAuth:使用数据库cAuth
show tables:显示所有表
create table books(id init not null auto_increment primary-key,isbn vachar(20) not null):创建表books
desc books: 查看books表的结构
select * from books: 查看books表的所有数据
select title from books:查询books表title字段的值
# 引入mysql
const {mysql}=require('../qcloud');
# 插入数据
try{
// 插入是异步操作 用try catch处理错误
await mysql('books').insert({
isbn,openid,rate,title, image, alt, publisher, summary ,price,tags,author
})
// ctx.body 无然后ctx.state ctx.state.code默认为0 0表示成功
ctx.state.data={ title, msg:'success' }
} catch(e){
ctx.state={
code:-1,
data:{
msg:"新增失败"+e.sqlMessage
}
}
}
# 查询数据
const findRes=await mysql('books').select().where('isbn',isbn);
返回数组 [{},{}]
5.nodejs https模块请求第三方api
const https = require('https');
function getJSON(url){
return new Promise((reslove,reject)=>{
https.get(url,res=>{
let urlData = '' res.on('data', data=>{ urlData += data; })
res.on('end', data=>{
const bookinfo = JSON.parse(urlData);
if(bookinfo.title){
reslove(bookinfo)
}
reject(bookinfo)
})
})
})
}
6.mysql 链式查询：
const books=await mysql('books')
.select('books.*','cSessionInfo.user_info')
.join('cSessionInfo','books.openid','cSessionInfo.open_id')
.orderBy("id","desc");
7.mysql 分页 limit() 查询多少条 offset()设置查询起点 从0开始
const books=await mysql('books')
.select('books.*','cSessionInfo.user_info')
.join('cSessionInfo','books.openid','cSessionInfo.open_id')
.limit(size)
.offset((Number(page)-1)*size)
.orderBy("id","desc");
8.mysql 给books表新增一个字段count 整型 默认值为0
alter table books add column count int default 0;
9.books表count 字段自增1
await mysql("books").where("id",id).increment('count',1);
10.koa获取get传参：ctx.request.query
koa获取post传参：ctx.request.body
11.css 模糊效果 filter:blur(15px);
12.获取设备信息（手机型号）
const phoneInfo = wx.getSystemInfoSync()
获取地理位置： wx.getLocation() 获取经纬度 再通过百度地图api将经纬度转化为具体的位置 (申请ak)
wx.getLocation({
success: geo => {
wx.request({
url,
data: {
ak,
location: `${geo.latitude},${geo.longitude}`,
output: 'json'
},
success: res => {
console.log(res)
if (res.data.status === 0) {
this.location = res.data.result.addressComponent.city
} else {
this.location = '未知地点' // console.log('出错了')
}
}
})
}
})
十二.小程序发布上线
1.修改src下config
2.修改server下的config
# 注释之前的nodejs本地开发环境的配置
# 修改mysql pass密码为appid
#.上传测试代码（开发工具详情显示开发环境正在运行 nodejs环境）
# 微信公众平台-->腾讯云-->mysql(phpMyAdmin)
# 输入root 密码:appid
# 点击sql 输入创建books表的sql语句创建books表
输入创建comments表的sql语句创建comments表
koa获取post传参：ctx.request.body
koa获取post传参：ctx.request.bodyctx.request.query
onst findReonst findRes=await mysql('books').select().where('isbn',isbn);s=await mysql('books').select().where('isbn',isbn);