【桌游小工具开发记录 00】项目简述

作为本项目首篇开发记录，将主要介绍项目基本情况，「主页」和「关于」页面制作，以及小程序开发过程中遇到的一些小坑。 type: Post

最近我的小程序——开开桌游小工具终于上线了，在开发过程遇到并处理了很多问题，利用博客进行一下总结，以内化吸收成为个人经验。

作为本项目首篇开发记录，将主要介绍项目基本情况，「主页」和「关于」页面制作，以及小程序开发过程中遇到的一些小坑。

项目简介

本项目用于辅助游玩各类实体桌游，以减少配件的使用和携带。

使用微信扫描二维码打开小程序体验：

当前已包含工具：

• 散樱乱武token计数工具

同时本项目已在Github开源，仓库地址：https://github.com/RJiazhen/Board_Game_Tool

开发相关

技术栈

• html、css、javascript；
• Vue、VueX；
• uniapp；

目录结构

Board_Game_Tool:
├─common
│      saAreaClick.js // 散樱乱武区域点击mixin文件
|      showShareMenu.js // 弹出分享菜单功能的mixin文件
├─components
│  ├─SA_player
│  │      SA_player.vue // 散樱乱武玩家区域组件
│  └─SA_shared
│          SA_shared.vue // 散樱乱武公共区域组件
├─pages
│  ├─about
│  │      about.vue  // 关于页面
│  └─home
│          home.vue  // 主页页面
├─static  // 一些静态资源
├─store
│      index.js  // store入口文件
│      sakura_arms.js // 散樱乱武store文件
└─subpkg
   └─sakura_arms
           sakura_arms.vue  // 散樱乱武页面

「主页」页面

「主页」布局非常简单，上下分为两部分的，上方为各个桌游工具图标，下方为小程序二维码，均使用弹性布局。

页面转发和小程序二维码

这两个功能是小程序传播的最便捷方法，但是需要注意页面转发功能不是默认打开的，在uniapp中需要调用uni.showShareMenu()方法才能开启。

小程序二维码则需要提前去微信公众平台的小程序页面的「设置」中进行配置和下载，无法自动生成。图片长按后弹出菜单也需要在<image/>中添加:show-menu-by-longpress="true”属性。

关于「分享到朋友圈」功能，可以参考uniapp的官方文档，介于暂时用不上，而且配置起来比较麻烦就暂时没有弄了。

「关于」页面

「关于」页面同样很简单，就一些简要的说明。

意见反馈按钮

uniapp可以直接插入能够调用微信小程序中打开反馈页面的按钮，只需要在<button/>中添加属性open-type="feedback”即可。

小程序内超链接

微信小程序中默认无法打开超链接，需要进行配置才能设置特定的网址为白名单，我这里暂时使用<uni-link/>进行链接的复制，让用户复制后再自行打开。