四.小程序前端

导入微慕源码及修改

1.安装小程序开发工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2.使用小程序管理员或有开发权限的微信号扫码登录
3.点击小程序项目,点击+号后填写相关内容
4.小程序管理后台设置授权域名并添加插件
授权域名:
插件:
目前用的是腾讯视频插件,后台设置-第三方服务-添加插件 搜索“腾讯视频”
5.小程序开发者工具查看详情——域名信息—如果出现你刚才设置的域名即为正确
6.修改until——config.js下的信息
网站域名:填写你的wordpress域名
网站名称:小程序的名字
下载域名:一般是wordpress域名,如果有用cdn或云存储需要加上。
首页图标导航的名字及跳转地址
7.修改完成点击编译 即可看到效果

微慕小程序设置

  • 消息模板
wp后台-微慕小程序-模板消息id

  1. 进入https://mp.weixin.qq.com/登录小程序账号
  1. 点击模板消息——添加——搜索“回复”“赞赏”“购买”
  1. 选择合适的模板
  1. 关键词可以修改顺序,选择好后将id复制到wp后台的微慕小程序插件里
  1. 设置完测试一下,如果发现选择的关键词不对可以修改,也可以调换顺序

常用简单修改

1.全局搜索
点击搜索按钮,输入想要修改的内容,点击查找
在结果页点击既可进入对应页面,修改后编译既可
2.批量替换
使用sublime text可以批量查找替换,具体教程自己百度一下
  1. 修改主题颜色
使用批量替换色值
4.修改图片图标
小程序所有的图标都在images目录下,可以直接用自己喜欢的替换掉
  1. 修改页面信息

打开对应页面的json,输入你要修改的信息(最后一行没有逗号)/

{
“enablePullDownRefresh”: true,//是否可以下拉刷新
“navigationBarBackgroundColor”: “#ffffff“, //页面导航颜色
“navigationBarTitleText”: “微信接口功能演示”, //页面导航标题
“navigationBarTextStyle”: “black”, //导航标题文字颜色 支持black/white
“backgroundColor”: “#eeeeee“,//窗口的背景色
“backgroundTextStyle”: “light”//下拉 loading 的样式,仅支持 dark / light
}
注意://及后边的文字只是为了注释,实际操作的时候删除掉
  1. 删除代码
如果自己对代码不熟悉,不建议自己调整样式。可以学习下简单的小程序操作后再调整。
我这里列举几个简单的例子。【一定要先备份之前的代码再做调整】
  • 删除首页导航栏

–自媒体版只需要修改index.wxml里即可,删除图中代码

–标准版、企业版、图片版同理

  • 删除底部导航栏

在app.json里删除对应的代码即可

8.修改首页导航
自媒体版本修改index.wxml:
  • 菜单的跳转说明,url为 页面路径,有参数时要带上参数
跳转到新页面,比如跳转分类文章列表,跳转随机文章页面,或者跳转文章详情页,
<navigator url=”/page/navigate/navigate?title=navigate” ></navigator>
切换 Tab,主要用于切换到底部导航的页面,比如切换到首页或者我的页面
<navigator url=”/page/index/index” open-type=”switchTab”></navigator>
跳转其他小程序 ,小程序需要在app.json里声明,app-id是目标小程序id,path是目标小程序页面
<navigator target=”miniProgram” open-type=”navigate” app-id=”” path=”” extra-data=”” version=”release”></navigator>
  • 页面路径获取,在开发者工具打开你要获取路径的页面,在左下角可以看到页面路径和参数,中间用英文?相连。如下图的详情页的路径就是 pages/detail/detail?id=156

其他版本修改config.js:
 
  • 参数说明:’name’为名称,’image’为图标路径,’url’为跳转的页面,’redirecttype’为跳转的类型,apppage为本小程序的页面,miniapp为跳转其他小程序,webpage为跳转到webview页面
  • ‘appid’: 当redirecttype为miniapp时,这个值为其他微信小程序的appid,如果redirecttype为apppage时,这个值设置为空。跳转的目标小程序需要在app.json里声明
 

提交审核及审核技巧

设置完成后点击预览生成二维码,微信扫码体验下所有功能,没有问题后即可提交审核。
1.点击上传,填写版本信息
2.进入小程序管理后台,开发管理——点击提交审核
3.填写信息,提交审核
审核优化的一些点
  • 在微信开发者工具里全局搜索“发帖”、“发表”、“发布”等词,改为“提交”或者你觉得合适的词
  • 尽量不要用社区、论坛、朋友圈、圈子等词
  • 在wordpress微慕插件里,关闭发帖功能、关闭评论功能
  • 提交审核的时候,描述不要提及发帖和圈子等,尽量少写
注意:类目要选择小程序内容相关的,不要写太多关键词,不要涉及社交、论坛、交互、支付及新闻等内容。

旅游版使用说明

  • 旅游版需要在小程序公众平台添加腾讯视频插件
  • 旅游版首页的编辑推荐使用的是后台的产品分类

企业版使用说明

  • 企业信息设置
在wp后台新建页面-填写对应的自定义字段,点击发布
在所有页面,鼠标放到页面标题上,浏览器底部会显示id 如图所示
将此id填入微慕小程序插件-显示选项–企业信息的页面id
 
其他的设置如图中所示,id为文章分类id,支持多级分类id。

3 thoughts on “四.小程序前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注