uni-app与jpress开发小程序

2018-12-18

这个博客,可能其实大部分的流量都来自于layui,因为我入选了一个第三方拓展组件:orgChart,百分之九十以上的博客流量,都是从layui的这个拓展组件平台带过来的,在这里先道个歉,各位lay友,因为最近换了工作,因为工作内容的关系,我可能会比较少接触layui了,第三方组件就由其它的lay友继续了,我可能会离开一段时间,因为新的工作,需要的是小程序,最近一段时间,我入坑了uni-app,然后在闲暇时间又了解了一下jpress,所以周末抽了一天时间,上线了自己的博客小程序,由jpress提供API接口,由uni-app提供编译后的小程序代码,其实uni-app还可以将代码编译成APP,H5页面,但是h5页面因为编译老是报错的问题,所以这里就先暂时不推出了,小程序博客二维码如下:

经历了好几个版本.开始的时候小程序连评论都用不了.因为docker执行权限的问题.后来也是一步一步踩坑.才弄好的.这里就慢慢的说一下我一路走来的坑吧:
1.jpress的docker部署:
jpress的作者海哥已经发布了docker-compose的方法.docker-compose的文件内容如下:

version: '3.1'

services:

  db:
    container_name: mysql
    image: mysql:5.6
    command: --default-authentication-plugin=mysql_native_password
    ports:
      - "3306:3306"
    restart: always
    environment:
       MYSQL_ROOT_PASSWORD: jpress
       MYSQL_DATABASE: jpress
       MYSQL_USER: jpress
       MYSQL_PASSWORD: jpress

  jpress:
    container_name: jpress
    depends_on:
      - db
    links:
      - db
    image: fuhai/jpress:latest
    ports:

      - "8080:8080"
    restart: always
    environment:
       TZ: Asia/Shanghai
       JPRESS_DB_HOST: db
       JPRESS_DB_PORT: 3306
       JPRESS_DB_NAME: jpress
       JPRESS_DB_USER: jpress
       JPRESS_DB_PASSWORD: jpress

直接在服务服务器上新建一个叫docker-compose.yml的文件,然后把上面的内容直接复制进去,保存.然后docker-compose up -d,就会自动下载上面文件里面的两个镜像了.完成以后,会启动两个容器.一个mysql,一个jpress,这个时候访问8080端口.就可以一步一步的设置博客信息了.但是坑.也从这一步开始:
首先:文件不能直接放在容器里面, 是需要挂载出来的,这样便于用户不用进入容器也能管理相应的重要文件,这里挂载的东西.有很多:1.tomcat的jpress项目文件,2.tomcat的server.xml文件,3.mysql的数据库文件,4.mysql的数据库配置文件(这个文件开始我没有挂载,但是踩坑一步步走到最后,还是挂载出来了…)
这些都是要挂载出来的.所以先运行容器.然后把容器里面的这些文件拷出来.命令如下:

1	docker cp jpress:/usr/local/tomcat/webapps/ROOT /home/jpress

类似于这样的拷贝.jpress容器里面的文件的路径,就是这个了.mysql是通用的路径,当然这些路径我就不在这里说了. 下面会直接贴出来相应的yml文件,大家就能看到了,修改后的docker-compose.yml文件内容如下:

version: '3.1'

services:

  db:
    container_name: mysql
    image: mysql:5.6
    command: --default-authentication-plugin=mysql_native_password
    ports:
      - "3306:3306"
    restart: always
    environment:
       MYSQL_ROOT_PASSWORD: jpress
       MYSQL_DATABASE: jpress
       MYSQL_USER: jpress
       MYSQL_PASSWORD: jpress
    volumes:
      - "/home/jpress/mysql:/var/lib/mysql:Z"
      - "/home/jpress/mysqld.cnf:/etc/mysql/mysql.conf.d/mysqld.cnf:Z"
  jpress:
    container_name: jpress
    depends_on:
      - db
    links:
      - db
    image: fuhai/jpress:latest
    ports:

      - "80:80"
      - "443:443"
    restart: always
    environment:
       TZ: Asia/Shanghai
       JPRESS_DB_HOST: db
       JPRESS_DB_PORT: 3306
       JPRESS_DB_NAME: jpress
       JPRESS_DB_USER: jpress
       JPRESS_DB_PASSWORD: jpress
    volumes:
       - "/home/jpress/tomcat/conf/server.xml:/usr/local/tomcat/conf/server.xml:Z"
       - "/home/jpress/tomcat/webapps:/usr/local/tomcat/webapps:Z"

文件挂载在外部的地方可以自己定义.但是容器中的路径不要写错.不然是挂载不出来的.
jpress启动以后,自行配置各种各样的东西.这里我就不再一一描述了,现在要做的是小程序的api接口:
需要设置小程序的appid,还有一个密钥,这里要注意的是:

这个密钥不是小程序的appsecret,而是你自己自定义的一个jprestoken生成的一个密钥

当然你也可以直接填成appsecret,小程序的代码我这里不是用的jpress-simple-blog,先把海哥做的小程序的代码在这里粘出来吧:
https://gitee.com/fuhai/jpress-miniprogram-simpleblog,这个能和jpress的api完全匹配.亲测可用,但是CENTOS服务器中,是有一个坑的:
大家可以盾到上面的yml文件配置中,volumes的配置中最后都有一个:Z,这个是centos一定要写的配置,目的是为了给予读写权限,不然docker容器是没有权限来读取本地的文件并挂载到容器中的,而这个小程序与jpress的API的坑就是当你在配置这个密钥的时候,生成的配置文件是并没有读写权限的,你需要在centos中再授权一下:

1	chmod 777 jboot.porperties

然后还要进入jpress容器中,重启tomcat.
当然,如果你的小程序不需要评论功能,上面的操作可以忽略,需要评论功能的话.jpress的api需要生成一个token,这个需要你设置的密钥来生成,但是文件不能读取,所以密钥为空,永远也无法正常登录.也就无法评价了,这里我当初因为解决不了这个问题.所以直接调用了不需要登录的评论接口.但是这个坑当时没过.现在好了.终于解决了.这是第二个坑
下面来接着说第三个坑:
小程序发布几天以后.有人告诉我说评论不了,然后我看着他的操作.结果是发了一个emoji表情…这让我很尴尬,我原来设置的数据库是utf-8,其实如何支持emoji表情.在网上已经有了很详细的教程了.我这里就只说个大概了.一是上面映射出来的mysqld.cnf中要添加一个配置:character_set_server=utf8mb4; 二是数据库要换成utf8mb4,三是数据库的表要设置成mb4,相应的列要设置成mb4,命令是:

1
2

ALTER TABLE 表名 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
ALTER TABLE 表名 CHANGE 字段名 字段名 该字段原来的数据类型 CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

这里还有一个更重要的.就是jboot.properties里面的连接.不要把utf8改成utf8mb4没鸟用!要把这个&characterEncoding=utf8直接干掉.然后重启项目就好啦!
好了,jpress与小程序的对接的坑.到此为止,基本上是踩得差不多了.后续还有没有.我不太清楚.至少现在,我的小程序是了评论,有了分类的功能的.
最后:奉上小程序的源码的github下载地址:https://github.com/xieyushi/blogWithJpressAndUniAPP
源码用的是uni-app.这个框架可以把代码编译成小程序,也可以编译成APP.这里我再贴一个小程序所对应的APP的下载地址,大家可以对照着看:点击下载
另外.uniapp其实是可以直接封装webview为app的,所以这里我还用uni-app封装了我自己用github pages搭建的博客:https://blog.coder666.cn(大家也许好奇为什么这两个网址不是同一个域名…coder666是腾讯云的,我的服务器在阿里云上,解析不过去,阿里云拦截了.好恶心…还好我在阿里云也备案了一个域名.没办法.这次双十一的优惠力度很大,我直接买了一个三年的服务器.)APP的下载地址:点击下载APP已经在微信开放平台上创建了应用.所以支持分享给微信好友与朋友圈了,分享到QQ也可以.但是腾讯开放平台没有通过审核.但是暂时还可以发,不知道为什么…腾讯开放平台一定要著作权…什么鬼…去了解了下.要600大洋一个.坚决不干!
其实如果不上小程序,我是不会用jpress的.但是最近学了uni-app,感觉不做个小程序,对不起自己…哈哈…踩坑至此为止,下两篇博客的内容也已经想好了.就写uni-app编写小程序,或者是uni-app编写app的一些重要东西.希望大家会感兴趣.