mpvue小程序实战项目开发记录篇(三)

十.项目需求分析

     

十一.项目开发

1. 项目配置:  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

         # 获取用户微信图像和昵称等个人信息：微信改版了要通过按钮去触发

            <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">获取用户信息</button>

            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);

阅读更多