mpvue小程序开发注意点

小程序语法缺点（我们为什么要使用vuejs）

  • 不能使用npm，使用第三方包的方式太原始
  • 需要为小程序单独开发代码，不能和web系统重用
  • 开发效率和学习成本（小程序特有语法）

mpvue入门

npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

koa2入门

 npm i koa --save

示例：

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'xxx';
});

app.listen(3000);

打开 http://localhost:3000/

  • Koa是基于nodejs平台的下一代web开发框架（Async await处理异步）
    1 callback 回调地狱
function callbacks(fn) {
  setTimeout(() => {
    // console.log('你好');
    fn();
  }, 1000);
}
callbacks(() => {
  console.log('执行结束');
  callbacks(() => {
    console.log('执行结束1');
  });
});

2.Promise

function delay(world) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(world);
    }, 5000);
  });
}
delay('你好').then((res) => {
  console.log(res);
  return delay('王者');
}).then((res) => {
  console.log(res);
});

3.async await

function delay(world) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(world);
    }, 5000);
  });
}
// async是声明一个函数，await是在函数内部用的
async function start() {
  const word1 = await delay('你好');
  console.log(word1);
  const word2 = await delay('王者');
  console.log(word2);
}
start();

koa-router入门
https://www.npmjs.com/package/koa-router

npm install koa-router --save


    const Koa = require('koa');
var Router = require('koa-router');
 
var app = new Koa();
var router = new Router();

router.get('/', (ctx, next) => {
  // ctx.router available
  ctx.body = 'wowoow'
});
app
  .use(router.routes())
  .use(router.allowedMethods());

  app.listen(3000)

腾讯云

  1. koa2+mysql+wafer-sdk
  2. 集成微信开发者工具一键上传部署
  3. 调试免费域名+环境

开通步骤

  1. 注册腾讯云 https://cloud.tencent.com/login?s_url=https%3A%2F%2Fconsole.cloud.tencent.com%2F，注意关联公众号
  2. 进入管理后台
  3. 下载nodejs demo ，熟悉开发工具，把文件夹server放到小程序代码与src平级中

开发工具管理代码

  1. server config.js
    "miniprogramRoot": "dist/wx/",
	"qcloudRoot":"./server/", //添加这行
	"compileType": "miniprogram",
  1. npm install wafer2-client-sdk --save (腾讯云解决方案sdk)

腾讯云后台本地开发环境搭建

配置 config.js

将 Demo 代码 clone 到本地，用编辑器打开 server/config.js 添加以下配置：
qcloudAppId: ‘您的腾讯云 AppID’,
qcloudSecretId: ‘您的腾讯云 SecretId’,
qcloudSecretKey: ‘您的腾讯云 SecretKey’,
使用腾讯云的SecretId，SecretKey，AppID
https://console.cloud.tencent.com/developer
https://console.cloud.tencent.com/cam/capi

const CONF = {
      // 其他配置 ...
    serverHost: 'localhost',
    tunnelServerUrl: '',
    tunnelSignatureKey: '27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',
      // 腾讯云相关配置可以查看云 API 秘钥控制台：https://console.cloud.tencent.com/capi
    qcloudAppId: '您的腾讯云 AppID',
    qcloudSecretId: '您的腾讯云 SecretId',
    qcloudSecretKey: '您的腾讯云 SecretKey',
    wxMessageToken: 'weixinmsgtoken',
    networkTimeout: 30000
}

1，安装brew

curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --strip 1

2 赋给/usr/local目录权限，执行

sudo chown -R $(whoami) /usr/local

但是这种方法对于高版本的OS来说，是解决不了的，会报chown: /usr/local: Operation not permitted错误。

先卸载已安装的homebrew，命令如下：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"然后重新安装：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

本地安装mysql

brew install mysql

启动服务

mysql.server start

报错

... ERROR! The server quit without updating PID file (/usr/local/var/mysql/sunflowersdeMacBook-Pro.local.pid).

2、解决办法

打开错误提示所指文件所在的目录 [/usr/local/var/mysql] ，删除该文件 [sunflowersdeMacBook-Pro.local.pid] ，再次启动MySQL就可以了。
或者sudo chown -R mysql:mysql /usr/local/var/mysql

cd /usr/local/var/mysql/
//进去mysql命令环境
mysql -u root

创建一个表

create database cAuth;


 切换到服务端代码目录
cd server

# 安装依赖
npm install

# 安装全局依赖
sudo npm install -g nodemon

server文件夹下初始化数据库 - 打开 CMD 输入如下命令：

 node tools/initdb.js

本地启动调试环境
Demo 里已经内置了调试的脚本，在 CMD 中输入如下命令即可启动 Debug 模式：

 npm run dev

项目骨架搭建
把图片放到目录static下，
在pages下面创建books，comments，me文件夹
项目初始化页面
mpvue小程序开发注意点
代码封装
在src目录下新建config.js

// 配置项
const host = 'http://localhost:5757'

const config = {
  host
}
export default config

在App.vue里面

<script>
import config from './config.js'
export default {
  created () {
    wx.request({
      url: config.host + '/weapp/demo', // 仅为示例，并非真实的接口地址
      //  data: {
      //    x: '',
      //    y: ''
      //  },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        console.log(res)
      }
    })
    // 调用API从本地缓存中获取数据
    // const logs = wx.getStorageSync('logs') || []
    // logs.unshift(Date.now())
    // wx.setStorageSync('logs', logs)

    // console.log('app created and cache logs by setStorageSync')
  }
}
</script>

调接口的时候会有下面错误
mpvue小程序开发注意点在开发的时候我们先打开小程序详情，钩上下面选项
mpvue小程序开发注意点
当然这不符合我们的逼格
新建一个util/index.js文件，这样我们就封装了一个get请求函数

import config from '../config'
export function get (url, data) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: config.host + url,
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header
      success: function (res) {
        if (res.data.code === 0) {
          resolve(res)
        } else {
          reject(res)
        }
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  })
}

App.vue里面更改如下

export default {
  async created () {
    await get('/weapp/demo').then((res) => {
      console.log(res)
    })
    // 调用API从本地缓存中获取数据
    // const logs = wx.getStorageSync('logs') || []
    // logs.unshift(Date.now())
    // wx.setStorageSync('logs', logs)

    // console.log('app created and cache logs by setStorageSync')
  }
}
</script>

个人中心开发

//微信授权
   npm install wafer2-client-sdk --save

https://github.com/tencentyun/wafer2-client-sdk

<template>
   <div id="persons">
        <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">获取用户信息</button>
        <!-- <open-data type="user" lang="zh_CN"></open-data> -->
    </div>
</template>
<script>
  import qcloud from 'wafer2-client-sdk'
import config from '../../config.js'
  export default {
    created () {
      this.doLogin()
    },
    methods: {
      doLogin: function (e) {
        qcloud.setLoginUrl(config.loginUrl)
        qcloud.login({
          success: function (userInfo) {
            console.log('登录成功', userInfo)
          },
          fail: function (err) {
            console.log('登录失败', err)
          }
        })
      }
    }
  }
</script>
<style>
  
</style>

初始化数据库

 node tools/initdb.js

进入mysql语句

 show tables;

mpvue小程序开发注意点

//查表
 select * from cSessionInfo;

mpvue小程序开发注意点
如何确定用户已经在我们的数据库里面了呢

 select * from cSessionInfo;

mpvue小程序开发注意点

继续页面～

npm install sass-loader node-sass --save-dev

/ 判断是不是闰年
    idLeapYear () {
      let year = new Date().getFullYear()
      if (year % 400 === 0) {
        return true
      } else if (year % 4 === 0 && year % 100 === 0) {
        return true
      } else {
        return false
      }
    },

mysql语句

//进入mysql语句（123456是密码，没有密码mysql -u root ）
 mysql -u root -p123456
 //查看数据库
 show databases;
 //进入某个数据库
 use cAuth;
 //查看有哪些表格
 show tables;
 //查找详情表
 desc cSessionInfo
 //查看表数据
 select * from cSessionInfo;
 //查找表中某个表头的数据
 select open_id from cSessionInfo
 //删除表格
 drop table test;
 //查看数据库版本
 select version();
 alter table user modify column name varchar(50) ; --修改字段长度
alter table test change  column address address1 varchar(30)--修改表列名
alter table test add  column name varchar(10); --添加表列  
//更改表字符
ALTER TABLE `你的表名` DEFAULT CHARACTER set utf8mb4 COLLATE utf8mb4_general_ci ;
//修改字符
ALTER TABLE `cSessionInfo ` CHANGE `open_id` `open_id` CHAR( 100 ) CHARACTER 
 set utf8mb4 COLLATE utf8mb4_general_ci ;
 
 ALTER TABLE `你的表名` DEFAULT CHARACTER set utf8mb4 COLLATE utf8mb4_general_ci ;
 
ALTER TABLE `books` CHANGE `id ` `id ` CHAR( 100 ) CHARACTER 
 set utf8mb4 COLLATE utf8mb4_general_ci ;

ALTER TABLE `cSessionInfo ` CHANGE `openid` `openid` CHAR( 100 ) CHARACTER 
 set utf8mb4 COLLATE utf8mb4_general_ci ;


ALTER TABLE `books` CHANGE `openid ` `openid ` CHAR( 100 ) CHARACTER 
 set utf8mb4 COLLATE utf8mb4_general_ci ;

新建server/controllers/addbook.js

// 新增图书
// 入库
// https://api.douban.com/v2/book/isbn/9787505735446
const https = require('https')
module.exports = async (ctx) => {
    // ctx.state.data = {
    //     msg: 'hello 小程序后台2ddd2'
    // }
    const {isbn, openid} = ctx.request.body
    if (isbn && openid) {
        const url = 'https://api.douban.com/v2/book/isbn/' + isbn
        // 获取数据
        const bookinfo = await getJSON(url)
        console.log(bookinfo)
        const rate = bookinfo.rating.average
        const { title, images, alt, publisher, summary, price } = bookinfo
        const tags = bookinfo.tags.map(v => {
            return `${v.title} ${v.count}`
        }).join(',')
        const author = bookinfo.author.join(',')
        console.log({
            rate, title, images, alt, publisher, summary, price, tags, author
        })
    }
}
// 获取图书信息
function getJSON (url) {
    return new Promise((reslove, reject) => {
        https.get(url, res => {
            let urlDate = ''
            res.on('data', data => {
                urlDate += data
            })
            res.on('end', data => {
                const bookInfo = JSON.parse(urlDate)
                if (bookInfo.title) {
                    reslove(bookInfo)
                }
                reject(bookInfo)
            })
        })
    })
}

server/routes/index.js添加路由

router.post('/addbook', controllers.addbook)

server/tools/snail.sql

-- 新建表
-- primary 主键
create table books(
  id int not null auto_increment primary key,
  isbn varchar(20) not null,
  openid varchar(50) not null,
  title varchar(100) not null,
  image varchar(100),
  alt varchar(100) not null,
  publisher varchar(100) not null,
  summary varchar(100) not null,
  price varchar(100),
  rate float,
  tags varchar(100),
  author varchar(100)
)

在mysql命令行输入

create table books(
  id int not null auto_increment primary key,
  isbn varchar(20) not null,
  openid varchar(50) not null,
  title varchar(100) not null,
  image varchar(100),
  alt varchar(100) not null,
  publisher varchar(100) not null,
  summary varchar(100) not null,
  price varchar(100),
  rate float,
  tags varchar(100),
  author varchar(100)
)；

查看描述
mpvue小程序开发注意点

// 入库
导入mysql

const {mysql} = require('../qcloud')
  try {
        await mysql('books').insert({
            isbn, openid, rate, title, image, alt, publisher, summary, price, tags, author
        })
        ctx.state.data = {
            title,
            msg: 'sussess'
        }
    } catch (e) {
        ctx.state.data = {
            code: -1,
            msg: '新增失败' + e.sqlMessage
        }
    }

现在查询数据select title from books;是有重复的数据的

 // 判断是否存在，存在的话就不存库
    // if (isbn && openid) {
    //     const findRes = await mysql('books').select().where('isbn', isbn)
    //     if (findRes.length) {
    //         ctx.state = {
    //             code: -1,
    //             data: {
    //                 msg: '图书已存在'
    //             }
    //         }
    //         return
    //     }
    // }

实现图书列表接口
首先去server/router/index添加路由

router.get('/booklist', controllers.booklist)

★★☆☆
评分组件

<template>
  <div class="rate">
    <span>☆☆☆☆☆</span>
    <div class="star ext-primary" :style = style>
      ★★★★★
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {type: [Number, String], default: '0'}
  },
  computed: {
    style () {
      return `width:${this.value / 2}em`
    }
  }
}
</script>
<style lang="scss" scoped>
.rate{
  position: relative;
  display: inline-block;
  .star{
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
  }
}
</style>

小程序如何实现下拉刷新

mpvue小程序开发注意点
wx.showNavigationBarLoading(Object object)在当前页面显示导航条加载动画
wx.stopPullDownRefresh(Object object)基础库 1.5.0 开始支持，低版本需做兼容处理。停止当前页面下拉刷新。
wx.hideNavigationBarLoading(Object object)在当前页面隐藏导航条加载动画

在当前页面新建books/json文件

{
  "enablePullDownRefresh": true
}

vue文件里面
 onPullDownRefresh: function (e) {
      // wx.startPullDownRefresh()
      this.getList()
      console.log('下拉')
    }

这样就实现了局部下拉刷新。

上拉加载
需要传递哪一页page过去

select character_set_name,collation_name from information_schema.columns where table_schema='cAuth' and table_name='cSessionInfo' and column_name ='open_id';

mpvue小程序开发注意点

如何上线
开通正式环境
购买域名和机器，修改config部署线上环境
发起代码审核，坐等审核

1 拷贝开发域名
mpvue小程序开发注意点
将配置项改为https://p9yyip6f.qcloud.la

2
修改数据库密码
mpvue小程序开发注意点

mpvue小程序开发注意点
mpvue小程序开发注意点七天以内可以向用户推送一次

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode