MENU

typecho 1.7版本小程序安装及说明文档

September 20, 2019 • Read: 215 • 小程序

typecho 1.7小程序安装及说明文档

本文详细介绍typecho小程序1.7版本的安装文档及问题说明。

演示
1.一个typecho博客并开启全站https
图片1.png
如图,网站前面必须为https开头。

2.小程序开发者账号
如果没有,点此进入注册
注册完成后,在开发-开发设置里,找到AppID(小程序ID)AppSecret(小程序密钥)内容,记录好,后面会用到。
图片2.png

3.配置小程序安全接口
在开发-开发设置里下拉,有服务器域名,加入网站域名,相关的域名都加入,所有选项都添加。
图片3.png

4.微信开发者工具
选择对应操作系统,进入下载
点此下载

1.新建项目-输入刚刚保存的AppID(小程序ID)-目录自己创建一个-点击创建
图片4.png
2.创建完成后,将下载的源码解压至刚刚创建的文件夹里面。
图片5.png
3.插件上传
将插件上传至usr/plugins目录下
图片6.png
4.开启插件并配置
后台首页-控制台-插件-找到WeTypecho插件-点击启用:
openid获取:控制台-wetypecho里面,找到自己的openid。
图片7.png
cid获取:如下图,鼠标放在对于文章位置,左下角会显示cid=,后面的数字就是cid
图片8.png
mid获取:与cid获取方式一样,对应分类下,mid=,后面数字就是mid
然后保存即可。
3.修改参数:
①修改小程序目录下config.js参数

exports.default = {
    getdomain: "www.catbei.com",//修改此处链接
    getname: "猫贝SEO",//修改标题
    getapisecret: "xxx",//修改为自己设置的密钥
    getIndexMenu: e
};

②修改首页mid,在config.js里面找到如下代码,mid有在上面提到过怎么获取。

var e = [ {
    id: "1",
    name: "心情",
    image: "../../images/works.png",
    url: "../list/list?mid=6&name=心情",//修改此处mid=6,数字
    redirecttype: "apppage",
    appid: "",
    extraData: ""
}, {
    id: "2",
    name: "热门",
    image: "../../images/ranker.png",
    url: "../cat/cat",
    redirecttype: "webpage",
    appid: "",
    extraData: ""
}, {
    id: "3",
    name: "SEO",
    image: "../../images/sbnote.png",
    url: "../list/list?mid=14&name=SEO",//修改此处mid=6,数字
    redirecttype: "apppage",
    appid: "",
    extraData: ""
} ];

③修改首页标题,在目录下app.json里面找到如下代码

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#FFB6C1",
    "navigationBarTitleText": "猫贝SEO",//修改此处文字
    "navigationBarTextStyle": "white",
    "navigationStyle": "default"
  },

④修改个人中心页小程序---第一步在app.json里面,第二步在page/about/about.wxml里面
第一步:

"navigateToMiniProgramAppIdList": [
    "wxb74e4b02b89501f2"//此处修改为其他与你同一主体的小程序app ID,不是同一主体会无法打开。
  ],

第二步:

<navigator target="miniProgram" open-type="navigate" app-id="wxb74e4b02b89501f2" path="" extra-data="" version="release" class='nav'></navigator>//修改代码中的app ID

⑤然后点击清缓存-全部清除,点击编译即可。

1.选择类目
审核类目
2.默认设置,直接提交审核。审核通过后,上线!

常见问题处理

1.不想要个人中心小程序广告怎么办?

替换以下代码,在page/about/about.wxml里面找到如下代码:

<view class="btn-area">
  <navigator target="miniProgram" open-type="navigate" app-id="wxb74e4b02b89501f2" path="" extra-data="" version="release" class='nav'></navigator>
</view>

将以上代码替换成下面代码:

<!--个性标语-->
    <view class="padding flex text-center text-grey bg-white shadow-warp">
    <view class="flex flex-sub flex-direction solid-right">
      <view class="text-xxl text-orange">青青子衿</view>
      <view class="margin-top-sm">
        <text class="cuIcon-attentionfill"></text>白茶清欢无别事</view>
    </view>
    <view class="flex flex-sub flex-direction">
      <view class="text-xxl text-green">悠悠我心</view>
      <view class="margin-top-sm">
        <text class="cuIcon-likefill"></text>我在等风也等你</view>
    </view>
  </view>

展示效果如下:
个人中心

2.热门排行页面有一段空白的情况

此处默认显示29篇文章,如果显示空白,则因为你的博客数量不够,请多多写一些文章吧。

3.小程序loading文字更换

在utils/net.js里面找到如下代码:

request: function(e) {
        var t = e.data, o = e.url, i = e.method;
        0 != e.showloading && wx.showLoading({
            title: "load...",//修改此处文字
            mask: !1
        }), wx.request({

4.文章页面如何插入视频

在网站文章加入以下代码:

!!! <video style="width: 100%;height=400px;margin:1px;" src="视频地址"
controls="controls"></video> !!!

5.审核不通过

博主也是最新遇到的问题,审核不通过,提示以下内容:
审核不通过
解决方法:
在插件设置里找到:是否开启小程序端分享,转发功能,设置为禁用。再重新提交审核!
WechatIMG7.png

6.如何隐藏分类

有些同学不想前台显示某一分类,设置方法:
在插件设置里找到此处
分类设置

输入你想要展示的分类mid:
如我的站,seo的mid为14,技术为9,小程序为32,只想展示两个,则输入9,14(此处逗号为英文),不填写数据则全部展示。
分类隐藏

其他文档

查看openid方法
程序不显示略缩图

Last Modified: October 5, 2019
Archives QR Code Tip
QR Code for this page
Tipping QR Code