网页如何变成微信小程序

网页如何变成微信小程序？

（1）、提前注丛烂激册小程序账号

此时所需准备的历悔资料包括：小程序名称，企业营业执照，证件，小程序管理人员姓名及联系方式，以及企业对公账户。特别是对公账户在后续支付环节未提供的，不能提交支付端口申请。

（2）、小程序的主要功能规划

许多商家认为这是小程序开发公司的事，其实，商家企业比较了解自己的行业和消费者，小程序应该具备哪些功能，商家最清楚，小程序开发公司是在技术实现上帮助商家完善程序细节，使小程序更完整。

（3）、申请域名，提前备案，申请SSL证书

互联网上提供的任何产品或服务都需要购买域名并完成域名备案才能上线，而且备案时间最快也需要20天左右，因此商家需要提前购买好域名，在哪里购买的域名可以直接在平台上申请备渗袜案。为了保证整个用户的生态数据安全，微信小程序必须使用HTTPS加密协议，而只有申请了SSL证书，才能实现https数据加密请求的业务域名。

把AngularJS开发的页面迁移到微信小程序

目录迁移

1、每个子模块页面换成Pages目录下的一个子目录，目录命名就是原子模块名。

2、原来的通用css、image、fonts等静态资源统一移到resource目录下，需要使用时，对于css样式文件，在对应子模块的wxss文件首部通过import命令引入；

替换规则

1、div需统一转换成View；

2、ng-show统一转换为wx:if；

3、ng-click统一转换为bindtap；

4、ng-repeat统一用wx:for替换；

5、ng-class中的样式选择性绑定可以直轮谨接把条件绑定语句嵌入class属性；

js代码

模块级代码迁移： 可将模块级作用域使用的通用迟桐判逻辑搬到app.js中，通过app对象来引用；或者定义一个util模块，来做动态引入； 对于原生与h5交互时用到的自定义事件，需要根据具码改体场景做处理。

子模块级代码迁移：

可将Angular子模块代码直接迁移到小程序对应Page对象中，当然，对于Angular特定语法的$***对象（例如$scope、$rootscope）的 *** 作，需要做全局替换，替换原则是：

1、$scope:与Page对象同生命周期内的$scope，可以直接替换成this；而对于非同一生命周期的（最常见的即是各种callback回调函数），需要将Page对象在方法外做引用保存（例如var self=this），然后在回调函数中使用。

2、$rootScope:推荐放入app对象中引用，或者自定义通用模块，然后动态引入；

3、数据模型：各页面中建立的数据模型，直接放入***.json文件中，如果涉及Angular特定语法的 *** 作，可参考上述两点的做法进行替换；

4、jsonp请求：将jsonp请求统一替换成wx.request请求，只是原来的链式写法要换成参数型写法；

5、子模块间的页面跳转，$state.go统一替换成wx.navigateTo或wx.navigateBack；

这个就是程序的基本架构。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。底部标签底部标签是一个tabBar。实现比较简单，只需要简单配置一下即可。 app.json

{

"pages":[

"pages/function/function",

"pages/pay/pay",

"pages/account/account",

"pages/index/index",

"pages/logs/logs"

],

"tabBar":{

"color": "#464a56",

"selectedColor": "#6595e9",

"backgroundColor": "#FFFFFF",

"borderStyle": "white",

"list": [{

"pagePath": "pages/function/function",

"text": "功能",

"态汪孙iconPath": "images/tab_function_default.png",

"selectedIconPath": "images/tab_function_sel.png"

},{

"pagePath": "pages/pay/pay",

"text": "收款",

"iconPath": "images/tab_consume_default.png",

"selectedIconPath": "images/tab_consume_sel.png"

},{

"pagePath": "pages/account/account",

"text": "账户",

"iconPath": "images/tab_account_default.png",

"selectedIconPath": "images/tab_account_sel.png"

}]

},

"window":{

"navigationBarBackgroundColor": "#6595e9",

"navigationBarTextStyle":"white",

"navigationBarTitleText": "V50",

"backgroundColor": "#eeeeee",

"backgroundTextStyle":"light"

}

}

2.值得注意的地方，就是 pages 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径.json, .js , .wxml, .wxss的四个文件进行整合。

3.页面标题

这个标题如何实现？

4.我们只需要把所有页面通用的配置放在 page.json，然后在各个page的 .json文件里面配置每个帆链页面特有的属性即可。因为在陵型上面的 app.json 中已经配置了通用页面的 window属性了，我们只需要在function.json中配置页面标题即可

{

"navigationBarTitleText": "功能"

}

5.轮播图

接下来实现顶部的轮播图。微信提供了一个swiper组件来实现轮播图。

<swiper indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}">

<swiper-item>

<image src="{{item}}" class="slide-image" />

</swiper-item>

</block>

</swiper>

function.js

//function.js

Page({

data: {

indicatorDots: true,

autoplay: true,

interval: 5000,

duration: 1000,

imgUrls: [

'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',

'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'

],

},

})

方法2

但很多人不知道的是，其实微信小程序是可以借助一款简单实用的制作工具「即速应用」生成的。整个过程无需编程无需代码，通过简单的拖拽组件即可生成微信小程序，非常方便。下面分享一下微信小程序开发教程入门篇，让新手们迅速掌握微信小程序开发的基本方法。

2.登录即速应用官网，点击上方首页菜单的“立即制作”，即可开始进行制作。

选择“空白模板”，进行自由创作。如果想节省时间，也可以选择主题模板进行快速制作。

3.进入制作界面后，可以看到页面分组和页面属性。点击“组件库”，开始搭建页面。

4.根据自己的需求选择组件以搭建页面，每个组件的文案和图片都是可以自己编辑的。

5.即速应用有很多可供选用的组件。比如用于布局的双栏组件、面板组件、顶部导航组件和底部导航组件。

还有一些可以实现更多复杂功能的高级组件，比如动态列表组件、动态容器组件、自定义表单组件、个人中心组件。

6.把每个页面都编辑好，并做好页面之间的跳转，确保逻辑无误。全部做好之后，点击右上角的“保存”，然后点击“发布”。若是制作过程中想要找回之前的版本，只需要去历史记录中回复既可。

7.跳转页面后，再次点击“发布”，即可生成。

8.点击“小程序打包”，生成小程序的代码。打包下载之后，就可以直接上传到微信官方后台的开发者工具里，即可完美对接小程序。技术人员还可以根据自己的需求修改，在原有代码的基础上进行二次开发。

---