TinyTale Halo小程序使用教程

详细安装教程

一、安装插件

将.jar 插件拖入后台安装。

配置信息:

在插件侧边栏,进入后点击TinyTale插件就可以进去设置界面,

image-20240426210023967

根据自己的情况填写即可。尽可能填满,因为有些为空可能报错。

二、小程序部分

获取代码

首先下载小程序的Uniapp代码。

image-20240426210857517

解压后就可以得到这样的一份文件。

image-20240426210947469

配置Uniapp

将文件夹拖到HBuilder X 打开(我开发的时候用的webstorm,所以对这个软件也不熟。但是为了消除一些问题,这里还是以HBuilder X为例子,再bb一句,这软件比webstorm都卡)

image-20240426211422775

进入根目录终端

image-20240426211653789

执行

yarn 
或者
yarn install

来安装依赖。按理来说,npm 或者pnpm应该都是可以的,但是保不齐会有什么情况,你可以试试。至于如何安装,可以自行搜索引擎搜索一下。

这里说明一点,这个项目所有的依赖都是npm下载的,没有Uniapp 市场的,所以你必须得有node 环境来下载。

image-20240426212441064

等待安装完成即可。

编辑manifest.json

这个文件路径为src/manifest.json

基本设置,重新获取下ID

image-20240426212733981

然后微信小程序设置:

填写你的小程序ID

上传代码时自动压缩必须勾选。

image-20240426212910569

启动项目

回到终端

输入

yarn run dev:mp-weixin

更多的命令可以查看根目录package.json

image-20240426213720482

执行完成后,会在dist/dev/mp-weixin生成好小程序的代码。并且监控更改进行热更新。

image-20240426214113568

配置api信息

到上一步都没有问题后。我们就可以配置连接信息了。

打开src/config/base.ts

按照里面的提示,填入信息

image-20240426222904895

title就是你小程序的名字。

version就是版本号,这个现在还没啥用,就当做个标记吧。

BASE_UEL这个是数据请求域名,至于为什么分成两个地址呢?很简单,并不是所有人的网站都是备案的,所以这时候就需要一个,二级备案域名充当通讯域名。

WEB_URL 你的网站地址,现在用于拼接原文链接地址之类的。

API_KEY 这个就是,填入你Halo的个人Personal Access Tokens下面就是获取教程。

获取个人token

进入后台后,点击这个。

image-20240426223459709

然后就可以点击到个人令牌

image-20240426223552046

新建

image-20240426223623936

name就是随便一个名称,随便取,过期时间可以填长一点,毕竟小程序上线后却过期了就很尴尬。

下面这些框框就是,选择权限,我的建议是全选,如果你比较了解,也可以按需来。

将生成的token填入即可

Token的作用
  • 用于请求配置信息
  • 用于获取,发布图库和瞬间。

微信开发助手打开

就是这个

image-20240426224213127

点击导入,找到之前生成的mp-weixin 导入。

image-20240426224332174

image-20240426224352021

ID选择自己的,如果你还没有注册,可以点测试号,随后,选择不使用云服务

image-20240426224609199

确认后就可以看到小程序界面了。

更多信息可以查看:文档:TinyTale使用文档

  • 41
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
WeHalo [wiˈheɪloʊ],意为我们的光环,嘻嘻。配合 Halo 轻快,简洁,功能强大的博客系统而开发出来的 简约风 微信小程序版博客QQ交流群: 260050047快速开始注:开源不易请留 WeHlo 底部署名不要删除git clone https://github.com/aquanlerou/WeHalo.git代码下载后,把 image 文件夹删除(放的是README中的图片与项目无关),用小程序 IDE 打开后即可使用。注:请选择小程序项目,非小游戏,例子中无 appid,所以无法在手机上运行,如果需要真机调试,请在打开例子时,填上自己的小程序 id文档修改app.js文件的全局变量,改为你的 Halo 博客的地址注:必须是HTTPS的因为,微信官方规定,还有把你的博客地址如:https://blog.eunji.cn添和https://v2.jinrishici.com加到微信公众平台的 request 合法域名中globalData: { //全局变量     URL: "https://blog.eunji.cn",   //你的地址     blogName: "AquanBlog",   //博客名字     TOKEN: "YouToken"   //Halo后台的Token }修改app.json文件更改小程序导航栏标题,改为你的博客名字"navigationBarTitleText": "AquanBlog",  //你的博客名字修改index.wxss文件更改首页封面背景图片,找到.aquanblog.aquanblog {     //填上你想要的封面图片链接     background-image: url("https://blog.eunji.cn/upload/2018/10/maximilian-weisbecker-544039-unsplash20181109154144125.jpg"); }修改poster.js文件更改 生成海报 功能附带你小程序宣传图片(图片可以在微信公众平台下载宣传物料获取放到你的服务器获取图片链接){     type: 'image',     //改为你的小程序宣传图片链接     url: 'https://blog.eunji.cn/upload/2018/11/wx20181208174737572.png',     css: {         width: '600rpx',         height: '167rpx',         mode: 'scaleToFill',         top: '433rpx',     } },html2wxml插件版本准备添加插件 搜索 html2wxml ,选中并添加 添加成功 文档正在不断完善中,遇到问题请加群提问或者 Issues 等你吐槽...演示
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值