网站转微信小程序

把官网塞进微信小程序，网站最常见的转微做法是直接套一个 webview 组件，把手机版网页的程序 URL 丢进去。三年前我帮一家做工业配件的网站客户这么干过，上线第二天就收到投诉：页面加载慢得离谱，转微用户点开产品列表，程序白屏转了五秒才出来。网站更糟的转微是，微信支付调不起来，程序客服按钮点了没反应。网站那个项目后来推倒重做，转微前后折腾了两个月。程序

webview 不是网站不能用，但它只适合一种情况：你的转微网站本身已经为移动端做了彻底改造，而且不需要调用任何微信原生能力。程序否则，它就是个临时壳子，用户能感觉到那种“隔了一层”的别扭。下拉刷新会跟小程序自己的手势打架，导航栏返回键的逻辑跟浏览器历史记录对不上，分享出去的卡片标题和缩略图经常抓错。这些细节单个看都是小事，叠在一起就是“这小程序真难用”。

真正要转，得把网站拆成两层来看。一层是内容，比如文章、商品详情、案例展示，这些可以用小程序的原生组件重新渲染。另一层是交互，比如表单提交、支付、客服消息、地理位置，这些必须换成微信提供的 API。我见过一个做民宿预订的团队，他们把网站上的日期选择器直接搬进小程序，结果在 iOS 上滑动手感完全不对，后来换成 <picker> 组件才解决。这种替换不是技术炫技，是用户手指头投票的结果。

数据接口这块反而简单。网站后端那套 RESTful API 或者 GraphQL 基本不用动，小程序里用 wx.request 调就行。但要注意域名必须备案，而且得在微信后台配好 request 合法域名。有个做餐饮加盟的客户，网站服务器在境外，小程序死活调不通，最后把接口层单独迁到国内云服务上才跑起来。另外 JSON 数据里别塞太多冗余字段，小程序对包体积和响应时间比浏览器敏感得多。

样式迁移是个体力活。网站的 CSS 里那些 float、position: fixed、复杂的 z-index 层级，在小程序里要么不支持，要么表现不一样。Flex 布局是主力，rpx 单位比 px 好用，但字体大小和间距得重新调。我自己的习惯是先把网站的设计稿按 750px 宽度重新标一遍，再写 wxss。别偷懒直接复制粘贴，那些 margin 塌陷和 line-height 继承问题会让你改到怀疑人生。

登录态是另一个坑。网站用 cookie 或 session，小程序用 wx.login 换 code，再后端换 openid 和 session_key。两套体系要打通，最稳妥的办法是让用户在首次进入小程序时做一次手机号授权，把网站账号和小程序 openid 绑定。否则用户在小程序里下了单，跑到网站上看不到订单，客服电话就打过来了。

如果网站内容量很大，比如几千个商品，别一次性全塞进小程序包。用分包加载，主包只放首页和核心流程，其他按需下载。图片资源全部上 CDN，小程序本地只留图标和少量占位图。我见过一个商城小程序主包 2MB 里塞了 800 张商品缩略图，审核直接被拒，理由就是包体积超标。

说到底，网站转小程序不是“移植”，是“重做”。把网站当成内容仓库和 API 提供方，小程序当成一个全新的前端项目来对待。那些想着三天上线、一周搞定的人，最后都在客服后台里被用户骂得抬不起头。