网页如何变成微信小程序？
如何将网页变成微信小程序？
(1)提前注册小程序账号
此时需要准备的信息包括：小项目名称、企业营业执照、文件、小项目经理姓名和联系方式，以及企业公共账户。特别是在后续支付环节未提供公共账户的，不能提交支付端口申请。
(2)小程序的主要功能规划
许多企业认为这是小型项目开发公司的问题。事实上，企业更了解自己的行业和消费者。企业最清楚小程序开发公司应该具备哪些功能。小程序开发公司帮助企业改进技术实现中的程序细节，使小程序更加完整。
(3)申请域名，提前备案，申请SSL证书
互联网上提供的任何产品或服务都需要购买域名并完成域名记录才能在线，记录时间最快约为20天。因此，企业需要提前购买域名，域名可以直接在平台上申请记录。为了保证整个用户的生态数据安全，微信applet必须使用HTTPS加密协议，只有申请SSL证书，才能实现HTTPS数据加密请求的业务域名。
小程序制作
微信小程序如何嵌入网页实现支付？
可用于嵌入式网页JSSDK1.3.0提供的接口，但坑来了，实际上不支持支付接口的呼叫，经过一些研究，终于打开了双方的互动。
1.首先解释所涉及的文件，将在下面使用
1.1app.js:小程序的app.js文件,在globalData定义一个全球变量paySuccessUrl:用于保存成功的支付跳转url
1.2wxminiwebview.js:小程序中放web-view的界面1.3wxminipay.js:本地支付界面的小程序
1.4web_pay.vue:嵌入式网页将调动支付路由组件界面，因为我使用它vue vue-router所以你最好了解vue和vue-router，记得介绍微信jssdk1.3.0.最新版本只包含小程序对应的方法。不幸的是，微信没有提供npm包，github有人提供的commonjs介绍方式微信jsdk版只有1.2.0，所以只能这样引入。
2.首先，我们正常嵌入一个内嵌网页，就像官网一样。url是wxmini_webview.js中data定义的变量，webview这就是加载网页的原因url。
3.嵌入网页web_pay.vue判断目前是否是微信环境。
window.wx.ready(function(){
isWxMini=window.__wxjs_environment==='miniprogram'
4.嵌入网页web_pay.vue调用支付时，成功跳转支付金额和支付说明url...记住你想要的任何参数encodeURIComponent)，将原始页面传递给小程序。
if(isWxMini){
letjumpUrl=encodeURIComponent(window.location)
letpath=`/page/pay/pay?amount=${amount}&title=${desc}&jumpUrl=${jumpUrl}`
window.wx.miniProgram.navigateTo({
url:path
5.在小程序支付界面wxmini_pay.js获取嵌入式网页传输的值，这里演示方便，实际上是在pagedata将这些存储在界面中的值显示得更好。
onLoad:function(options){
console.log(options)
///获取从网页传来的值
//TODO用es6解构获取值TODO
jumpUrl=options.jumpUrl
amount=options.amount
title=options.title
6.支付成功后，将跳转url附带支付结果和当前时间保存到全局变量。
paySuccess(){
letcurrentTime=newDate().getTime()
//这是为了防止wxmini_webview.js由于前后两个url一致，setdata被调用到文件中，导致路由不触发刷新bug
jumpUrl=options.jumpUrl encodeURIComponent(`?payResult=1&time=${currentTime}`)
//payResult=1说明支付成功，这里懒得直接在url后面补？实际情况比较复杂
///为了实现支付成功返回后的无刷新加载，这里的参数应该属于路由web_pay.vue，而不是属于window.location.search的
//因此，有必要判断路由锚点#的位置以及是否有路由参数(如果是vue-router我没用过history模式，应该和window.location一样吧）
getApp().globalData.paySuccessUrl=jumpUrl///保存跳转url到小程序的全局变量
wx.navigateBack()///返回会议上的页面，即承载网页的容器页面wxmini_pay.js
7.回到小程序wxmini_webview.js,会触发onshow,无刷新加载内界面。
onShow:function(){
console.log('onshow')
letpaySuccessUrl=getApp().globalData.paySuccessUrl
getApp().globalData.paySuccessUrl="///清空支付成功url，防止一些操作触发onshow事件
if(paySuccessUrl){
leturl=decodeURIComponent(paySuccessUrl)
this.setData({
///这里在下一步6中解释一下&time=${currentTime},当你第一次支付成功回来的时候，就是因为没有这个。
///这个url和你第二次支付成功回到这里一样，会导致第二次支付开始，这里的setdata方法失效
8.步骤7中的setdata将触发webview中的网页加载，因为我使用它vue-router,而且前后两个url只有不同的路由参数query，不会触发界面刷新或路由重新加载，只会触发beforeRouteUpdate例如，现在支付前的界面是#/pay,然后在支付成功后跳转payResult=1&time=123456#/pay,此时界面不会刷新，pay路由不会重新加载，而是触发beforeRouteUpdate(to,from,next),你所要做的就是在这里分析界面to.query里面的数据，然后你该怎么办？
beforeRouteUpdate(to,from,next){
console.log(路由发生了变化，很可能是小程序支付成功回调”)
letpayResult=to.query.payResult
if(payResult){///小程序支付成功
if(payResult==='1'){
console.log(支付成功，下班打卡离开)
next()
如何将自己的淘客网站做成微信小程序？
做小程序开发就可以了，目前淘宝和微信都不能用一个界面。
嵌入已有的 Web 页面的「Web」利用微信小程序框架开发的小程序和小程序「原生」小程序有什么区别？
在此之前，如果有人问我是用小程序还是用微信做产品， Web 页面 (严谨，既不是 HTML5 更不是 H5…) 当时，我会这么说：
以上就是【特别是最后一个！网站嵌入微信小程序(微信小程序嵌入h5)】的全部内容。
评论