整理一些关于我开发的第一个微信小程序

228 阅读2分钟

前言

hi 我是yee,一个前端小白; 闲下一时兴起想着开发一个小程序,一直以来都没有接触过,也一直对于自己的技术少有总结,所以借此机会记录一下项目中遇到的问题并与大家相互学习;

前期准备

微信开发者工具

用于开发微信小程序主体,后期开发中有了解到实战中用的更多的是uniapp

Visual Studio

用于开发api,我用的2019

SQLServer

属于小项目数据库中的万金油了

腾讯云域名注册

因为微信小程序登录通过wx.login获取openidsession_key不能直接在微信开发者工具里面进行编码,所以需要注册一个域名然后通过api的方式请求。咱就是说花费一块钱买不了吃亏

sunny-Ngrok

这是一个要给2块钱实名认证一次性消费的内网穿透服务,如果后期想发布到微信并让你的小伙伴访问你的小程序那么就需要这个,具体可以参照官方文档。

不想花钱买云服务器所以打算用自己的电脑当服务器,就爱折腾。

目标

打算开发一个简简单单的打卡小程序;

前端:登录、注销、新建打卡块、点击块打卡;

api: openid请求、dapper

dapper

dapper直接配合model实体实现简单的crud

查询示例

        public static string QueryStr<T>(params string[] whereColumn) where T : BaseModel
        {
            Type t = typeof(T);
            string columns = string.Join(",", t.GetProperties().Select(x => $"[{x.Name}]"));
            string result = $"select {columns} from [{t.Name}] ";
            if (!(whereColumn == null || whereColumn.Count() == 0))
            {
                result += $"where {string.Join(" and ", whereColumn.Select(x => $"[{x}]=@{x}"))}";
            }
            return result;
        }

调用示例

        using (IDbConnection conn = new SqlConnection(DBHelper.ConnectionString))
        {
                //var sql = "select * from s_user";
                //if (!string.IsNullOrEmpty(userName))
                //{
                //    sql += " and username = '"+ userName + "'";
                //}
                string sql = "";
                
                if (!string.IsNullOrEmpty(userName))
                {
                    sql = DBHelper.QueryStr<TS_User>("userName", "EnableFlag");
                }
                else
                {
                    sql = DBHelper.QueryStr<TS_User>("EnableFlag");
                }
                return conn.Query<TS_User>(sql, new { userName, EnableFlag = "Y" }).ToList();
        }
登录获取openid
        [HttpGet]
        [Route("Session")]
        public wxInfo GetOpenId(string code)
        {

            string serviceAddress = string.Format(@"https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type=authorization_code", appid, secret, code);
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(serviceAddress);
            request.Method = "GET";
            request.ContentType = "application/json";
            HttpWebResponse response = (HttpWebResponse)request.GetResponse();
            Stream myRessponseStream = response.GetResponseStream();
            StreamReader myStreamReader = new StreamReader(myRessponseStream, Encoding.UTF8);
            string retString = myStreamReader.ReadToEnd();
            myStreamReader.Close();
            myRessponseStream.Close();

            JObject json = JObject.Parse(retString);
            wxInfo info = new wxInfo()
            {
                openid = json["openid"].ToString(),
                session_key = json["session_key"].ToString()
            };
            return  info ;

        }

        private static string GetJson<T>(T obj)
        {
            DataContractJsonSerializer json = new DataContractJsonSerializer(typeof(T));
            using (MemoryStream ms = new MemoryStream())
            {
                json.WriteObject(ms, obj);
                string szJson = Encoding.UTF8.GetString(ms.ToArray());
                return szJson;
            }
        }

        public class wxInfo { 
            public string openid { get; set; }
            public string session_key { get; set; }
        }

appid和secre获取

image.png

小程序调用示例

image.png

功能展示

首页

游客状态

image.png

登录

游客状态傻瓜验证后自动跳登录 image.png

image.png

首页

image.png

新增打卡

image.png

打卡测试

image.png

傻瓜校验

image.png

发布

image.png

上线后小伙伴使用

image.png

总结

很遗憾因为云服务的关系没有用frp做穿透,一直挂着ngrok看起来确实很蠢,这个项目零零散散花了一周时间,功能面涉及不广所以没有遇到特别掉头发的问题,算是一次尝试,加油共勉