微信公衆號開發

1.首先有一個公衆號(服務號)；

2.登錄微信公衆平臺設置Url(注意這個url是入口地址,每次請求都要從這個地址進)以及Token

 

3.公衆號的基本設置就到此結束，其餘的設置用到時再來設置。接下來就是寫代碼:

  3.1自定義公衆號菜單：

     先獲取Access_Token

using Common;
using System.Timers;

namespace Common
{
    /// <summary>
    /// 獲取Access_Token
    /// </summary>
    public static class AccessTokenUtil
    {
        private static readonly string FILENAME = "AccessTokenUtil.cs";
        // AccessToken
        private static string AccessToken = "";
        // 超時時間
        private static int Expires_in = 7200;
        private static Timer timer = null;

        public static string GetAccessToken()
        {
            if (string.IsNullOrEmpty(AccessToken))
            {
                // 獲取Token並定時刷新
                string httpcontent = GetTokenHttp();
                bool result = FormatResult(httpcontent);

                if (result == true)
                {
                    // 設置定時器
                    if (timer != null)
                    {
                        timer.Dispose();
                    }

                    timer = new Timer();
                    timer.Elapsed += delegate 
                    {
                        string httpcontent2 = GetTokenHttp();
                        bool result2 = FormatResult(httpcontent);
                        if (!result2)
                        {
                            LogHelper.FileNameError(FILENAME, string.Format("Timer獲取Token失敗"));
                        }
                    };
                    timer.Interval = Expires_in * 1000 / 2;
                }
                else
                {
                    LogHelper.FileNameError(FILENAME, string.Format("獲取Token失敗"));
                }
            }

            return AccessToken;
        }

        /// <summary>
        /// 發送請求獲取AccessToken
        /// </summary>
        /// <returns></returns>
        private static string GetTokenHttp()
        {
            string url = "https://api.weixin.qq.com/cgi-bin/token";

            string appid = System.Configuration.ConfigurationManager.AppSettings["appid"];
            string appsecret = System.Configuration.ConfigurationManager.AppSettings["appsecret"];
            string param = string.Format("grant_type=client_credential&appid={0}&secret={1}", appid, appsecret);

            string result = HttpUtils.HttpGet(url, param);

            LogHelper.FileNameInfo(FILENAME, string.Format("access_token接收到的數據：{0}", result));
            return result;
        }

        private static bool FormatResult(string result)
        {
            AccessTokenResult resultObj = fastJSON.JSON.ToObject<AccessTokenResult>(result);
            if (!string.IsNullOrEmpty(resultObj.access_token))
            {
                AccessToken = resultObj.access_token;
                Expires_in = resultObj.expires_in;
                return true;
            }
            else
            {
                LogHelper.FileNameError(FILENAME, string.Format("獲取失敗，返回碼：{0}, 錯誤信息：{1}", resultObj.errcode, resultObj.errmsg));
                return false;
            }
        }

        public class AccessTokenResult
        {
            public string access_token { get; set; }
            public int expires_in { get; set; }
            public string errcode { get; set; }
            public string errmsg { get; set; }
        }
    }
}

menu.txt

{
    "button":[
    {
            "type":"view",
            "name":"訂水",
            "url":"http://wx."
    },
    {

           "type":"view",
           "name":"商城",
           "sub_button":[
           {    
               "type":"view",
               "name":"個人商城",
               "url":"http://wx"
            },
            {
                 "type":"view",
                 "name":"個人訂單",
                 "url":"http://wx."
             },
            {
               "type":"view",
               "name":"個人地址",
               "url":"http://wx.sil"
            }]

    },
    {
            "type":"view",
            "name":"關於",
           "sub_button":[
           {    
               "type":"view",
               "name":"鍶的做用",
               "url":"https://mp.weixin-KQ3Q"
            },
            {
                 "type":"view",
                 "name":"關於鍶享家",
                 "url":"https://mp.weixin"
             },
            {
               "type":"view",
               "name":"聯繫咱們",
               "url":"http://wx"
            }]
    }]
}

請求微信接口建立菜單

using Common;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace weixin_api
{
    public partial class createMenu : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            FileStream fs1 = new FileStream(Server.MapPath(".") + "\\menu.txt", FileMode.Open);
            StreamReader sr = new StreamReader(fs1, Encoding.GetEncoding("GBK"));
            string menu = sr.ReadToEnd();
            sr.Close();
            fs1.Close();

            string token = AccessTokenUtil.GetAccessToken();
            GetPage("https://api.weixin.qq.com/cgi-bin/menu/create?access_token=" + token, menu);
        }
        public string GetPage(string posturl, string postData)
        {
            Stream outstream = null;
            Stream instream = null;
            StreamReader sr = null;
            HttpWebResponse response = null;
            HttpWebRequest request = null;
            Encoding encoding = Encoding.UTF8;
            byte[] data = encoding.GetBytes(postData);
            // 準備請求...
            try
            {
                // 設置參數
                request = WebRequest.Create(posturl) as HttpWebRequest;
                CookieContainer cookieContainer = new CookieContainer();
                request.CookieContainer = cookieContainer;
                request.AllowAutoRedirect = true;
                request.Method = "POST";
                request.ContentType = "application/x-www-form-urlencoded";
                request.ContentLength = data.Length;
                outstream = request.GetRequestStream();
                outstream.Write(data, 0, data.Length);
                outstream.Close();
                //發送請求並獲取相應迴應數據
                response = request.GetResponse() as HttpWebResponse;
                //直到request.GetResponse()程序纔開始向目標網頁發送Post請求
                instream = response.GetResponseStream();
                sr = new StreamReader(instream, encoding);
                //返回結果網頁（html）代碼
                string content = sr.ReadToEnd();
                string err = string.Empty;
                Response.Write(content);
                return content;
            }
            catch (Exception ex)
            {
                string err = ex.Message;
                return string.Empty;
            }
        }
    }
}

調接口以前還要在微信平臺裏面添加白名單即將本地的ip地址加進去，否則請求出錯。接口調用成功後取消關注從新關注公衆號就能看到建立的菜單。

3.2 菜單建立完成後接下來就是拿到用戶信息存在數據庫裏面，在咱們關注或取消關注的時候微信會給咱們上面的填寫的Url發送請求，因此在這個url(我這個是wxapi.aspx)對應的頁面裏面就能夠拿到用戶信息以及用戶操做類型(關注事件仍是取消事件等)

using Common;
using DAL;
using fastJSON;
using Model;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml;
using System.Xml.Linq;
using weixin_api.ViewModels;

namespace weixin_api
{
    public partial class wxapi : System.Web.UI.Page
    {
        private readonly string FILENAME = "wxapi.aspx";
        private static List<BaseMsg> _queue = null;
        protected void Page_Load(object sender, EventArgs e)
        {
            LogHelper.FileNameInfo(FILENAME, "收到服務器消息");

            // 取參數 signature、timestamp、nonce、encrypt_type、msg_signature
            string echoString = Request.QueryString["echoStr"];
            string signature = Request.QueryString["signature"];
            string timestamp = Request.QueryString["timestamp"];
            string nonce = Request.QueryString["nonce"];
            string encrypt_type = Request.QueryString["encrypt_type"];
            string msg_signature = Request.QueryString["msg_signature"];

            LogHelper.FileNameInfo(FILENAME, string.Format("參數分別是, echoString={0}, signature={1}, timestamp={2}, nonce={3},encrypt_type={4},msg_signature={5}", echoString, signature, timestamp, nonce, encrypt_type, msg_signature));

            if (!string.IsNullOrEmpty(echoString))
            {
                Response.Write(echoString);
                Response.End();
                return;
            }

            // 驗證簽名
            string token = System.Configuration.ConfigurationManager.AppSettings["Token"];
            if (!ParamCheck(signature, timestamp, nonce, echoString, token))
            {
                LogHelper.FileNameError(FILENAME, string.Format("服務器驗證失敗"));
                Response.End();
                return;
            }

            // 接收消息
            if (Request.HttpMethod.ToUpper() == "POST")
            {
                string str = ConvertUtils.StreamToString(Request.InputStream);
                LogHelper.FileNameInfo(FILENAME, "接收到的事件數據：" + str);


                //解密
                //公衆平臺上開發者設置的token, appID, EncodingAESKey
                string sToken = System.Configuration.ConfigurationManager.AppSettings["Token"];
                string sAppID = System.Configuration.ConfigurationManager.AppSettings["appid"];
                string sEncodingAESKey = System.Configuration.ConfigurationManager.AppSettings["EncodingAESKey"];

                WXBizMsgCrypt wxcpt = new WXBizMsgCrypt(sToken, sEncodingAESKey, sAppID);
                string sMsg = "";  //解析以後的明文
                int ret = 0;
                ret = wxcpt.DecryptMsg(msg_signature, timestamp, nonce, str, ref sMsg);
                if (ret != 0)
                {
                    LogHelper.FileNameInfo(FILENAME, string.Format("解密失敗:" + ret));
                    Response.End();
                    return;
                }

                // 判斷隊列是否超額
                if (_queue == null)
                {
                    _queue = new List<BaseMsg>();
                }
                else if (_queue.Count >= 50)
                {
                    // 保留20秒內未響應的消息
                    _queue = _queue.Where(q => { return q.CreateTime.AddSeconds(20) > DateTime.Now; }).ToList();
                }
                //這是解密出來的結果
                //<xml><ToUserName><![CDATA[gh_9fca63d34597]]></ToUserName>
                //<FromUserName><![CDATA[orhx-5o9]]></FromUserName>
                //<CreateTime>1557123110</CreateTime>
                //<MsgType><![CDATA[event]]></MsgType>
                //<Event><![CDATA[VIEW]]></Event>
                //<EventKey><![CDATA[http://wx.s/gzh_Ping.html]]></EventKey>
                //<MenuId>471589802</MenuId>
                //</xml>
                XElement xdoc = XElement.Parse(sMsg);
                var FromUserName = GetXmlElement(xdoc, "FromUserName");
                var CreateTime = GetXmlElement(xdoc, "CreateTime");
                var msgtype = GetXmlElement(xdoc, "MsgType").ToUpper();
                var MsgId = FromUserName + CreateTime;
                string openid = GetXmlElement(xdoc, "FromUserName");
                if (string.IsNullOrEmpty(openid))
                {
                    LogHelper.FileNameInfo(FILENAME, string.Format("沒有獲取到當前用戶的openid"));
                    Response.Write("");
                    Response.End();
                    return;
                }

                GlobalInfo.openid = openid;

                MsgType type = (MsgType)Enum.Parse(typeof(MsgType), msgtype);

                if (type == MsgType.EVENT)
                {
                    try
                    {
                        // 事件消息
                        if (_queue.FirstOrDefault(m => { return m.MsgFlag == MsgId; }) == null)
                        {
                            _queue.Add(new BaseMsg
                            {
                                CreateTime = DateTime.Now,
                                FromUser = FromUserName,
                                MsgFlag = MsgId
                            });
                        }
                        else
                        {
                            Response.Write("");
                            Response.End();
                            return;
                        }
                        EventMsg(new EventModel
                        {
                            ToUserName = GetXmlElement(xdoc, "ToUserName"),
                            FromUserName = GetXmlElement(xdoc, "FromUserName"),
                            CreateTime = GetXmlElement(xdoc, "CreateTime"),
                            MsgType = GetXmlElement(xdoc, "MsgType"),
                            Event = GetXmlElement(xdoc, "Event"),
                            EventKey = GetXmlElement(xdoc, "EventKey"),
                            MenuId = GetXmlElement(xdoc, "MenuId")
                        });
                        return;
                    }
                    catch (Exception ex)
                    {
                        LogHelper.FileNameInfo(FILENAME, "事件消息處理出現異常" + ex.Message);
                    }
                }
                else
                {
                    Response.Write("");
                    Response.End();
                    return;
                }
            }

            LogHelper.FileNameInfo(FILENAME, "未知消息");
            Response.End();
            return;
        }
        /// <summary>
        /// 驗證參數
        /// </summary>
        /// <returns></returns>
        private bool ParamCheck(string signature, string timestamp, string nonce, string echostr, string token)
        {
            List<string> list = new List<string>();
            list.Add(token);
            list.Add(timestamp);
            list.Add(nonce);
            list.Sort();

            string str = string.Join("", list);
            string shaStr = SHA1Common.SHA1(str);

            LogHelper.FileNameInfo(FILENAME, string.Format("sha結果：{0}, signature={1}", shaStr, signature));

            if (!string.IsNullOrEmpty(signature) && !string.IsNullOrEmpty(shaStr) && signature.ToUpper().Equals(shaStr.ToUpper()))
            {
                return true;
            }

            return false;
        }

        private void EventMsg(EventModel model)
        {
            LogHelper.FileNameInfo(FILENAME, "接收到事件：" + model.Event);
            switch (model.Event)
            {
                case "subscribe":
                    SubscribeEvent(model);
                    break;
                case "unsubscribe":
                    UnSubscribeEvent(model);
                    break;
                default: break;
            }
        }

        /// <summary>
        /// 訂閱事件
        /// </summary>
        /// <param name="model"></param>
        private void SubscribeEvent(EventModel model)
        {
            try
            {
                 //發請求獲取用戶信息
                string url = "https://api.weixin.qq.com/cgi-bin/user/info";
                string access_token = AccessTokenUtil.GetAccessToken();
                string param = string.Format("access_token={0}&openid={1}&lang=zh_CN", access_token, model.FromUserName);
                string result = Common.HttpUtils.HttpGet(url, param);
                wx_user user = JSON.ToObject<wx_user>(result);
                wx_userDal wxUserDal = new wx_userDal();
                if (wxUserDal.Exists(user.openid))
                {
                    // 已存在，更新關注屬性爲1
                    wxUserDal.UpdateSubscribe(user.openid, 1, (long)user.subscribe_time);
                }
                else
                {
                    // 添加到數據庫
                    user.balance = 0;
                    int n = wxUserDal.Add(user);
                    if (n != 1)
                    {
                        LogHelper.FileNameError(FILENAME, string.Format("用戶訂閱失敗, openid:{0}", user.openid));
                    }
                }

                string r = sendTextMessage(model, System.Configuration.ConfigurationManager.AppSettings["DefaultWxMsg"]);
                HttpContext.Current.Response.Write(r);
                HttpContext.Current.Response.End();


            }
            catch (Exception e)
            {
                LogHelper.FileNameError(FILENAME, e.Message);
            }
        }

        /// <summary>
        /// 取消訂閱事件
        /// </summary>
        /// <param name="model"></param>
        private void UnSubscribeEvent(EventModel model)
        {
            // 把數據庫是否訂閱字段改成0
            try
            {
                wx_userDal wxUserDal = new wx_userDal();
                wxUserDal.UpdateSubscribe(model.FromUserName, 0, Common.CommonUtils.GetTimeStamp());
            }
            catch (Exception e)
            {
                LogHelper.FileNameError(FILENAME, e.Message);
            }
        }

        private string GetXmlElement(XElement element, string nodeName)
        {
            if (element == null || string.IsNullOrEmpty(nodeName))
            {
                return string.Empty;
            }

            if (element.Element(nodeName) != null)
            {
                return element.Element(nodeName).Value;
            }

            return string.Empty;
        }


        #region 關注後自動回覆
        /// <summary>  
        /// 發送文字消息  
        /// </summary>  
        /// <param name="wx" />獲取的收發者信息  
        /// <param name="content" />內容  
        /// <returns></returns>  
        private string sendTextMessage(EventModel wx, string content)
        {
            string res = string.Format(Message_Text,
                wx.FromUserName, wx.ToUserName, DateTime.Now.Ticks, content);
            return res;
        }
        /// <summary>
        /// 普通文本消息
        /// </summary>
        private static string Message_Text
        {
            get
            {
                return @"<xml>
                            <ToUserName><![CDATA[{0}]]></ToUserName>
                            <FromUserName><![CDATA[{1}]]></FromUserName>
                            <CreateTime>{2}</CreateTime>
                            <MsgType><![CDATA[text]]></MsgType>
                            <Content><![CDATA[{3}]]></Content>
                            </xml>";
            }
        }

        #endregion


        #region 模型
           public class BaseMsg
        {
            /// <summary>
            /// 發送者標識
            /// </summary>
            public string FromUser { get; set; }
            /// <summary>
            /// 消息表示。普通消息時，爲msgid，事件消息時，爲事件的建立時間
            /// </summary>
            public string MsgFlag { get; set; }
            /// <summary>
            /// 添加到隊列的時間
            /// </summary>
            public DateTime CreateTime { get; set; }
        }

        public enum MsgType
        {
            /// <summary>
            ///文本類型
            /// </summary>
            TEXT,
            /// <summary>
            /// 圖片類型
            /// </summary>
            IMAGE,
            /// <summary>
            /// 語音類型
            /// </summary>
            VOICE,
            /// <summary>
            /// 視頻類型
            /// </summary>
            VIDEO,
            /// <summary>
            /// 地理位置類型
            /// </summary>
            LOCATION,
            /// <summary>
            /// 連接類型
            /// </summary>
            LINK,
            /// <summary>
            /// 事件類型
            /// </summary>
            EVENT
        }

        public enum Event
        {
            /// <summary>
            /// 非事件類型
            /// </summary>
            NOEVENT,
            /// <summary>
            /// 訂閱
            /// </summary>
            SUBSCRIBE,
            /// <summary>
            /// 取消訂閱
            /// </summary>
            UNSUBSCRIBE,
            /// <summary>
            /// 掃描帶參數的二維碼
            /// </summary>
            SCAN,
            /// <summary>
            /// 地理位置
            /// </summary>
            LOCATION,
            /// <summary>
            /// 單擊按鈕
            /// </summary>
            CLICK,
            /// <summary>
            /// 連接按鈕
            /// </summary>
            VIEW,
            /// <summary>
            /// 掃碼推事件
            /// </summary>
            SCANCODE_PUSH,
            /// <summary>
            /// 掃碼推事件且彈出「消息接收中」提示框
            /// </summary>
            SCANCODE_WAITMSG,
            /// <summary>
            /// 彈出系統拍照發圖
            /// </summary>
            PIC_SYSPHOTO,
            /// <summary>
            /// 彈出拍照或者相冊發圖
            /// </summary>
            PIC_PHOTO_OR_ALBUM,
            /// <summary>
            /// 彈出微信相冊發圖器
            /// </summary>
            PIC_WEIXIN,
            /// <summary>
            /// 彈出地理位置選擇器
            /// </summary>
            LOCATION_SELECT,
            /// <summary>
            /// 模板消息推送
            /// </summary>
            TEMPLATESENDJOBFINISH
        }
        #endregion
    }
}

 3.3 菜單完了、用戶信息存了，接下來就是 具體的功能實現新建頁面，在網上找一個公衆號開發的框架好比我用的是weui，去官網下載。

好比一個簡單的購買水的頁面

 

代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
    <link href="static/weui-master/css/weui.css" rel="stylesheet" />
    <link href="static/weui-master/css/weuix.css" rel="stylesheet" />
    <script src="static/weui-master/js/zepto.min.js"></script>
    <script src="static/weui-master/js/zepto.weui.js"></script>
    <script src="static/weui-master/js/axios.min.js"></script>
    <script src="static/weui-master/js/zepto.weui.js"></script>
    <script src="static/weui-master/js/zepto.min.js"></script>
    <title>產品列表</title>
    <style>
        .lab {
            font-size: 15px;
            color: gray;
        }

        .price {
            color: red;
        }

        .page-bg {
            /*background-color:orange;*/
        }

        .weui-cells {
            margin-top: 0.5em;
        }

        .goumai {
            position: relative;
            top: 20px;
        }

        .weui-count {
            position: relative;
            top: 9px;
        }

        #goodslist {
            margin-bottom: 50px;
        }

        .weui_media_title {
            font-size: 13px;
        }

        .car {
            font-size: 8px;
            -o-border-radius: 100%;
            -ms-border-radius: 100%;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
        }

        .weui-cell__ft {
            text-align: center;
        }

        .weui-btn_mini {
            line-height: 2.1;
        }
        * {
            touch-action: pan-y;
        }
    </style>
    <script>
        $(function () {

            $('.weui-tab').tab({
                defaultIndex: 0,
                activeClass: 'weui-bar__item_on',
                onToggle: function (index) {
                    if (index > 0) {
                        if (index == 1) {
                            var spanCar = parseInt($('#spanCar').text());  //購物車裏面數量
                            if (spanCar <= 0) {
                                $.toast("購物車太空啦。", "forbidden");
                            } else {
                                window.location.href = "gzh_ManageCar.html";
                            }
                        }
                    }
                }
            })
        })

    </script>

</head>
<body ontouchstart class="page-bg">
    <div class="weui-pull-to-refresh__layer">
        <div class='weui-pull-to-refresh__arrow'></div>
        <div class='weui-pull-to-refresh__preloader'></div>
        <div class="down">下拉刷新</div>
        <div class="up">釋放刷新</div>
        <div class="refresh">正在刷新</div>
    </div>

    <div class="weui-cells" id="goodslist">
    </div>


    <div class="weui-tab tab-bottom " style="height:44px;z-index:100;">
        <div class="weui-tabbar">

            <a href="javascript:;" class="weui-tabbar__item">
                <span style="display: inline-block;position: relative;">
                    <i class="icon icon-67 f27"></i>
                    <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;" id="ResPrice">￥0.0</span>
                </span>
                <p class="weui-tabbar__label">本次消費</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <span style="display: inline-block;position: relative;">
                    <i class="icon icon-24 f27 weui-icon-warn"></i>
                    <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;" id="spanCar">0</span>
                </span>
                <p class="weui-tabbar__label">購物車</p>
            </a>

            <!--<a href="javascript:;" class="weui-tabbar__item weui-icon-warn">
                <i class="icon icon-43 f27 weui-icon-waiting"></i>
                <p class="weui-tabbar__label">去結算</p>
            </a>-->
            <!--<a href="javascript:;" class="weui-btn bg-orange">快去結算</a>-->
        </div>
    </div>

    <script type="text/javascript">
        //全局變量
        var load = false; // load爲判斷接口是否請求完成,防止屢次觸摸、屢次點擊致使接口的屢次請求出錯
        var page = 1;//默認第一頁
        var pageSize = 20;  //默認一頁顯示6條數據
        $(function () {
            $(document.body).pullToRefresh({
                distance: 10,
                onRefresh: function () {
                    getData(page, "api/GetTicketListJson.ashx"); //初始化數據從第一頁數據開始請求
                    getCar();
                    $(document.body).pullToRefreshDone();

                }
            });
            getData(page, "api/GetTicketListJson.ashx"); //初始化數據從第一頁數據開始請求
            getCar();
            var MAX = 99, MIN = 0;
            $('.weui-count__decrease').click(function (e) {
                var id = $(this).attr("tag");
                var $input = $(e.currentTarget).parent().find('.weui-count__number');
                var number = parseInt($input.val() || "0") - 1
                if (number == 0) {
                    $('#des' + id).hide();
                }
                if (number < MIN) {
                    number = MIN;
                    return;
                }
                $input.val(number)
            })
            $('.weui-count__increase').click(function (e) {
                var id = $(this).attr("tag");var $input = $(e.currentTarget).parent().find('.weui-count__number');
                var number = parseInt($input.val() || "0") + 1
                if (number > MAX) number = MAX;
                $input.val(number)
            })

        });

        //請求後臺數據
        function getData(page, url) {  //請求接口的方法，方法帶page，url兩個參數。
            $('#more').text('正在加載中...');
            $.ajax({
                url: url,  //請求接口的url
                type: 'get',//請求方式（post或get）默認爲get
                async: false,  //默認狀況下是true表示全部請求爲異步請求，若是要爲同步則用false
                dataType: "json",
                data: {
                    'page': page,
                    'limit': pageSize,
                    'name': ''  //$("#searchInput").val()
                },
                success: function (data) {  //請求成功調用的回調函數
                    if (data != null && data.code == 0) {
                        $("#pageNum").val(parseInt(data.currentPage) + 1);
                        showList(data);
                        if (data.currentPage >= data.totalPage) { //這裏判斷接口數據是否到底部
                            load = true;
                            $("#more").html('已經到底了');
                        } else if (data.currentPage < data.totalPage) {
                            load = false;
                            $("#more").html('查看更多');
                        }
                    }
                },
                error: function (error) { //請求失敗調用的回調函數
                    console.log(error);
                }
            });
        }
        //查詢當前用戶的購物車信息
        function getCar() {
            axios.post('api/AddCar.ashx?goodId=0&numType=0')
                 .then(function (rs) {
                     if (rs.data.result) {
                         $('#spanCar').text(rs.data.code);
                     }
                 })
            .catch(function (e) {

            });
        }

        //顯示數據
        function showList(data) {   //顯示列表的html內容
            $("#goodslist").html("");
            for (var i = 0; i < data.list.length; i++) {
                var html = "<div class='weui-cell weui-cell_swiped'><div class='weui-cell__bd'><div class='weui-cell'><div class='weui-cell__hd'>"
                html += "<img src='" + data.list[i].imgurl + "' alt='' style='width:60px;margin-right:5px;display:block'>";
                html += "</div>";  //img外面的div結束
                html += "<div class='weui-cell__bd'><span class='weui_media_title product-buttom'>" + data.list[i].title + "</span><br><span class='lab'>規格:" + data.list[i].regulation + "</span><span id='spanPrice" + data.list[i].id + "' class='lab price'>￥" + data.list[i].price + "</span>";
                html += "</div>";  //標題 單價 規格 外面的div結束
                html += "<div class='weui-cell__ft'><div class='weui-count'><a class='weui-count__btn weui-count__decrease' style='display:none;' id='des" + data.list[i].id + "' tag=" + data.list[i].id + "></a><input class='weui-count__number' style='display:none;' tag=" + data.list[i].id + " id='txtCount" + data.list[i].id + "' type='number' value='0' /><a class='weui-count__btn weui-count__increase' tag=" + data.list[i].id + "></a>";
                html += "</div>";  //計數器外面的div結束
                html += "</div>";  //class="weui-cell__ft" div結束
                html += "</div></div></div>";

                $("#goodslist").append(html);

            }
        }

        //加減按鈕事件
        function ChangeCount(v, op) {
            $.showLoading("加載中...");
            var id = v;
            if (parseInt(id) > 0 && id != "") {
                axios.post('api/AddCar.ashx?goodId=' + id + "&numType=" + op)
        .then(function (rs) {
            $.hideLoading();
            if (rs.data.result) {
                JsPrice();
                $('#spanCar').text(rs.data.code);
            } else {
                $.toast("添加失敗" + rs.data.msg, "cancel");
            }
        })
        .catch(function (e) {
            $.hideLoading();
            $.toast("請求失敗", 3000);
        });
            }
        }

        //計算本次消費金額
        function JsPrice() {
            var priceSum = 0;
            var chks = $('#goodslist input[type=number]');
            if (chks.length > 0) {
                for (var i = 0; i < chks.length; i++) {
                    var num = parseInt($(chks[i]).val());
                    var id = parseInt($(chks[i]).attr("tag"));
                    if (num > 0) {
                        //單價
                        var price = $('#spanPrice' + id).text().replace(/￥/, '');
                        //計算總價
                        priceSum += num * price;
                    }

                }
            }
            $('#ResPrice').text("￥" + parseFloat(parseFloat(priceSum)).toFixed(2));
        }

        //==============核心代碼=============
        //鼠標向下滾動加載下一頁數據，或者移動端向下滑動加載下一頁數據
        var winH = $(window).height(); //頁面可視區域高度
        var scrollHandler = function () {
            var pageH = $(document.body).height();
            var scrollT = $(window).scrollTop(); //滾動條top
            var aa = (pageH - winH - scrollT) / winH;
            if (aa < 0.02) {//0.02是個參數
                if (load == false) {
                    load = true;
                    page = $("#pageNum").val();
                    getData(page, "/api/GetTicketListJson.ashx");
                }

            }
        }
        //定義鼠標滾動事件
        $(window).scroll(scrollHandler);
    </script>
</body>
</html>

 具體功能畫面根據本身需求去寫，這裏簡單舉例而已。到這裏就已經基本完成了。但願能夠幫助更多的剛開始接觸公衆號開發的夥伴們，後面有空再寫公衆號受權 微信支付等這些