第一次做微信公众号前端开发个人总结

第一次进行前端开发,经验总结,个人记录

使用语言 HTML5+CSS+PHP(不过由于需求方要求比较简单 并没有使用上PHP)

使用框架:WEUI

项目内容:微信公众号页面

总结:

1.菜鸟教程会讲述很多基本语法,所以html5、css、php等语言一些基本内容不懂可以去查阅学习一下,里面还有案例。

附上链接:https://www.runoob.com/

2.善于使用框架。

WEUI内有许多布局,可以在开发时候使用,如果是新手上路,对于布局不甚掌握可以参考它的网页源码(鼠标右键——检查/查看网页源代码),其次 使用框架可以减少一些代码量。

WEUI使用方法:https://github.com/Tencent/weui 这是WEUI的git开源代码,可以将其下载下来,在dist/style目录下将weui.css复制到你所开发的目录下,然后引用这个css就可以使用里面的样式了。

3.个人多加调试。

不直观调试是看不出来样式可行与否。

4.网页适配手机问题

 在开发界面,添加代码:

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="style.css"/>

然后在style.css里添加如下代码:

@media only screen and (min-width: 1024px){
      body{zoom:3.2;}
}
@media only screen and (
### 实现微信登录功能 #### OAuth2授权流程 为了使用户能够在微信公众号内置浏览器中完成登录操作,需遵循OAuth2协议。具体来说,在前端页面加载时应重定向至特定的微信授权链接[^3]: ```javascript let redirect_uri = encodeURI(window.location.href).split('#')[0], appid = "YOUR_APP_ID"; // 替换成实际应用ID let wx_url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`; window.location.href = wx_url; ``` 此代码片段会引导用户的设备访问由`wx_url`指定的位置,从而触发微信服务器向第三方应用程序发送临时凭证(即`code`),该凭证稍后可用于交换更持久性的令牌。 #### 后端处理逻辑 一旦接收到带有`code`参数的回调请求,服务端应当立即利用这个一次性码去换取access_token以及其他必要的个人信息。以下是基于Golang编的简化版控制器函数来构建这样的响应机制[^2]: ```go // AuthLogin @Title 授权URL // @router /authLogin [post,get] func (u *UserController) AuthLogin() { url := fmt.Sprintf("https://open.weixin.qq.com/connect/oauth2/authorize?appid=%s&redirect_uri=%s&response_type=code&scope=snsapi_userinfo&state=200#wechat_redirect", appid, baseUrl) u.Success(0, url, "成功") } ``` 请注意替换其中的变量值以匹配具体的项目环境配置。 #### JS-SDK初始化与权限声明 为了让网页能够调用微信提供的JavaScript API,开发者还需要提前准备好一系列准备工作,比如注册并启用相应的API接口名称列表。对于地理位置相关的交互而言,则至少要包含如下所示的内容[^1]: ```json { "jsApiList": ["openLocation","getLocation"] } ``` 同时确保已按照官方指引完成了JS-SDK的安全域名备案工作,并通过有效的签名算法验证当前页面合法性之后再执行任何敏感的操作。 #### 注意事项 - **安全性考量**:在整个过程中务必妥善保管各类密钥信息,防止泄露给未经授权方;另外建议采用HTTPS加密传输方式保障数据安全。 - **调试工具的应用**:可以借助微信公众平台提供的在线沙盒账号来进行初步的功能测试,方便快捷地获取到所需的AppId和AppSecret用于本地模拟运行期间。 - **多团队协作管理**:当存在多名成员共同参与同一个项目的开发周期内,记得各自独立创建专属的小程序实例以便于分工合作而不至于混淆彼此之间的资源文件版本控制等问题的发生。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值