### 微信公众号生产环境运营的项目[培训机构的服务号项目]

2024-03-24 15:23:16

这个项目是博主现实中给一个小公司做的，他们的需求比较简单，博主想利用这个项目给大家先展示一个简单的微信公众号入门生产项目吧，后续会一步一步的给大家讲解一些更复杂的项目。

在分享项目之前，博主还是要再简单的讲讲微信这平台能利用来做互联网流量宣传入口的几个点，一个是公众号【服务号、订阅号】，一个是小程序，但两者都有一个共同点，如果要实现收款功能，都必须每年要付马HT一笔300RMB的认证费。另外就是要准备一台阿里云的服务器和一个通过备案的域名，服务器和域名最好是用同一个人的名义来处理，否则两者要做特别处理【备案号】才能互通，好了，这就是所有编码之前要准备的环节了。

这次要做的是一个公众号营销项目，主要内容是页面内容展示【包括业务展示和企业人员的展示等等】、报名、支付和数据存储等环节。

首先是微信支付的申报和域名的备案环节的展示

【微信支付的认证页面】

【阿里云官网进行域名备案的页面】

其次，进入微信公众号编码环节，这时候要确定一门后端语言，比如Java、Python、PHP等，这些语言结合HTML、JS等交互语言进行开发才能达到前后端一致性交互的效果。

从技术端来讲【PHP】，这次的项目使用了：

1、微信支付公众号的用户授权

这个太简单了，而且是入门级别的内容，相信很多博客主也讲过，这里我就不再强调了，略过。。。

2、使用了weui框架【weui.js框架】

这些代码就是weui框架中的js调用部分的内容。

< a href=" " class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
< img class="weui-media-box__thumb" src="../images/zdxjy/pingtuan_img_2.jpg" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title" id="kecheng_title">课程标题</h4>
<p class="weui-media-box__desc">
<span style="color: #ff0000;">￥<span id="real_price">199.00</span></span>
<span class="right">ⅹ<span id="selected_num">0</span></span>
</p >
</div>
</ a>

<a class="weui-cell weui-cell_access" href="javascript:" οnclick="fnSelectAddress(this);">
<div class="weui-cell__bd">
<p>学校地址</p >
</div>
<div class="weui-cell__ft">请选择分校地址</div>
<input type="hidden" name="school_address">
</ a>

以下这张截图用的是 weui.css布局==>

这个页面是主页面，大概的实现功能是文本、图片展示，团拼活动的超链接跳转【发起团拼】等等，点击发起团拼就会进入到填写信息、支付和储存数据环节。

3、使用doT模板

<br>
<div class="weui-form-preview">
<div class="weui-form-preview__hd">
<label class="weui-form-preview__label">付款金额</label>
<em class="weui-form-preview__value">¥{{=value.total_money}}</em>
</div>
<div class="weui-form-preview__bd">
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">订单编号</label>
<span class="weui-form-preview__value">{{=value.no}}</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">学生姓名</label>
<span class="weui-form-preview__value">{{=value.student_name}}</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">手机号码</label>
<span class="weui-form-preview__value">{{=value.phone}}</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">年级</label>
<span class="weui-form-preview__value">{{=value.grade}}</span>
</div>
<div class="weui-form-preview__item">
<label class="weui-form-preview__label">科目</label>
<span class="weui-form-preview__value">{{=value.kemus}}</span>
</div>
<div class="weui-form-preview__item" οnclick="fnOpenMap(0, '{{=value.school_address.name}}', '{{=value.school_address.full_address}}');">
<label class="weui-form-preview__label">校区名称</label>
<span class="weui-form-preview__value">{{=value.school_address.name}}</span>
</div>
<div class="weui-form-preview__item" οnclick="fnOpenMap(0, '{{=value.school_address.name}}', '{{=value.school_address.full_address}}');">
<label class="weui-form-preview__label">校区地址</label>
<span class="weui-form-pr