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

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

 

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

 

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

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

                                                                                             【微信支付的认证页面】

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

 

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

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

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

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

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

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

<div class="container">

    < 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>

    <div class="weui-cell weui-cell_active">
        <div class="weui-cell__hd"><label class="weui-label">学生姓名</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" placeholder="填输入学生姓名" name="student_name">
        </div>
    </div>
    <div class="weui-cell weui-cell_active">
        <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" placeholder="填输入手机号" name="phone">
        </div>
    </div>

    <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>

    <a class="weui-cell  weui-cell_access" href="javascript:" οnclick="fnSelectGrade(this)">
        <div class="weui-cell__bd">
            <p>选择年级</p >
        </div>
        <div class="weui-cell__ft"></div>
        <input type="hidden" name="grade">
    </ a>

    <div class="weui-cell ">
        <div class="weui-cell__bd">
            <p>选择性别</p >
        </div>
        <div class="weui-cell__ft" id="sex_div">

            <label class="weui-agree">

                <input type="radio" class="weui-agree__checkbox" name="sex" value="男">
                <span class="weui-agree__text">男</span>

                <i

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

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

 

3、使用doT模板

<script type="text/x-dot-template" id="ordersTemplate">
    {{~it:value:index}}

    <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

这段代码主要是doT模板的一部分实现。

4、使用了微信公众号支付【调起-->支付-->储存信息到数据库】

 

整个项目的代码下来，你会发现博主大量的使用外部的一些实用的成熟框架和微信平台既定好的一些小框架，这样可以加快开发的速度，这个项目的代码量也显得不是那么的多，恰到好处。

整个项目的代码讲解就这样了，看上去是比较简单哈，毕竟是一个入门的简单生产项目，还没到给大家分享高阶复杂的项目的时候，HHahh。

最后就展示一下整个项目在UAT环境的初步运营情况吧

 

以上的几张图都是微信支付后的回调函数推来的数据展示的页面，分别有订单支付完成回调、订单详情页面和客服【管理】微信的支付信息汇总页面。

以上这张是后台数据储存部分的页面展示，如果想要把所有的订单数据调用出来进行分析，那就要用到数据库进行sql处理了。

好了，这里只是简单的讲讲大概的实现步骤，不过详细的代码也不是特别多，如果有想了解的朋友，还是老样子可以加我，相互学习进步！

qq:1013359736

标签：项目,微信,value,weui,address,###,页面
来源： https://blog.csdn.net/u011439313/article/details/112553389