Article directory
- introduction
- One: code sharing
- 2. Online Tutorial
- Summarize
foreword
Mini Program Platform : Douyin
Mini Program Name : Yunyun Wallpaper
Version Number : 3.0
Basic Functions : Wallpaper Emoticon Package Avatar Cover Image Upload, Talent Entry, Talent Management, Advertising Configuration, Talent Distribution, Team Management, Data Charts, Official Account Docking, message push.
Highlight features : membership payment (double-ended), cps/cpm revenue details, advertising anti-swipe monitoring, automatic conversion of emoji video to gif, automatic playback of emoji video, ui beautification, and adding Kuaishou ios advertisements.
System development history : Yunyun Map and Yunyun Wallpaper have been updated for more than a year, serving many entrepreneurs and pursuing industry quality. (Please look for the customer service in the Yunyun Take Picture and Yunyun Wallpaper applet)
After-sales service : After-sales service of the genuine system is worry-free, and the manual reply is online 6*10 a week. The template is complete and ready to use. Developers communicate online to support additional custom development.
Demo diagram:
1. Code sharing
Part of the backend code:
<!doctype html>
<html class="x-admin-sm">
<head>
{include file='base/common_header'}
</head>
<body class="index">
{include file='base/common_miniheader'}
<!-- 中部开始 -->
<!-- 左侧菜单开始 -->
{include file='base/common_left_menu'}
<!-- <div class="x-slide_left"></div> -->
<!-- 左侧菜单结束 -->
<!-- 右侧主体开始 -->
<div class="page-content">
<div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
<ul class="layui-tab-title">
<li class="home">
<i class="layui-icon"></i>我的桌面</li></ul>
<div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
<dl>
<dd data-type="this">关闭当前</dd>
<dd data-type="other">关闭其它</dd>
<dd data-type="all">关闭全部</dd></dl>
</div>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe src='/admin/welcome' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
</div>
</div>
<div id="tab_show"></div>
</div>
</div>
<div class="page-content-bg"></div>
<style id="theme_style"></style>
<!-- 右侧主体结束 -->
<!-- 中部结束 -->
</body>
<script type="text/javascript">
layui.use(['form', 'layer'],
function() {
var form = layui.form,
layer = layui.layer,
$ = layui.jquery;
})
function clearCache(){
$.get('/admin/clearCache',{},function (r){
layer.msg('清除成功');
})
}
</script>
</html>Part of the front-end code:
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText":"",
//"navigationStyle": "custom"
"transparentTitle":"always"
}
},
{
"path": "pages/index/recommend",
"style": {
"navigationBarTitleText": "热门详情"
}
},
{
"path": "pages/talent/index"
},
{
"path": "pages/talent/detail",
"style": {
// "navigationBarTitleText":""
// "navigationStyle": "custom"
// "transparentTitle":"always"
}
},
{
"path": "pages/cate/index"
},
{
"path": "pages/search/index"
},
{
"path": "pages/search/result"
},
{
"path": "pages/list/index"
},
{
"path": "pages/detail/index",
"style": {
"navigationBarTitleText":"",
//"navigationStyle": "custom"
"transparentTitle":"always"
}
},
{
"path": "pages/user/index",
"style": {
"navigationBarTitleText":"",
// "navigationStyle": "custom"
"transparentTitle":"always"
}
},
{
"path": "pages/user/collect"
}
,{
"path" : "pages/index/webview"
},
{
"path":"pages/index/richtext"
},
{
"path": "pages/detail/layout2"
},
{
"path":"pages/user/richtext"
},
{
"path":"pages/user/setting"
}
,{
"path" : "pages/user/expert"
}
,{
"path" : "pages/pay/index",
"style": {
"navigationBarTitleText": "成为会员"
}
},
{
"path": "pages/user/order-list",
"style": {
"navigationBarTitleText": "我的订单"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "云云壁纸",
"navigationBarBackgroundColor": "#3D88FE",
"backgroundColor": "#FFFFFF"
},
"tabBar": {
"color": "#666666",
"selectedColor": "#3D88FE",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/images/home.png",
"selectedIconPath": "static/images/home-active.png",
"text": "首页"
}
, {
"pagePath": "pages/talent/index",
"iconPath": "static/images/expert.png",
"selectedIconPath": "static/images/expert-active.png",
"text": "达人"
}
, {
"pagePath": "pages/index/recommend",
"iconPath": "static/images/tuijian1.png",
"selectedIconPath": "static/images/tuijian.png",
"text": "推荐"
}
, {
"pagePath": "pages/user/index",
"iconPath": "static/images/user.png",
"selectedIconPath": "static/images/user-active.png",
"text": "我的"
}
]
}
}
2. Online tutorial
1. Registration: Douyin open platform account and real-name authentication
2. Deploy the mini program and submit it for review
3. Fill in the public account and open the advertisement.
Summarize
That's all for today's sharing, I hope it will be helpful to everyone.