小白如何利用工具制作自己的h5小程序

就商城功能实现来说，小程序商城与h5商城并没有太大差异，两者存在的不同主要体现在以下方面：

1、营销推广

1、小程序入口更丰富，触达用户的方式更多样；h5页面需要一定的内嵌载体，一般需要通过微信公众号菜单访问。

2、广告推广

朋友圈广告展现以小程序为主，通过小程序做广告投放效果更好。

3、客户留存

小程序不存在粉丝的概念，只有收藏的按钮，收藏的小程序出现在顶部聊天框下拉的位置；而h5商城是依托公众号的，需要强制引导用户关注公众号成为粉丝。

4、展示界面

展示界面的差别主要体现在分享展示上，分享到群或分享给好友时，小程序以商品卡片的形式呈现，屏占比更大，视觉冲击力更强。

5、用户体验

小程序页面流畅性远高于h5，微信小程序的开发时基于微信提供的，内置了编程、调试、开发环境、发布于一身的开发工具，小程序的使用体验几乎可以接近独立的APP。

6、小程序的局限性

小程序是依托于微信，因此无法跳出微信，只能使用微信支付，无法分享到其他社交软件。而h5的支付方式更灵活，可以作为推广链接添加到任意页面。

总的来说，小程序作为目前非常主流的一种商城搭建方式，和本身小程序的优势，绝大多数商家都会优先选择小程序商城进行推广。

一、小程序架构

每个小程序的结构都有两个主要部分构成：主体部分+各个页面。类似于许多框架，主体部分主要用于核心的配置，各个页面主要用于不同业务场景。

11、主体部分主要由3个文件构成

1）appjs：小程序逻辑，初始化APP

2）appjson：小程序配置，比如导航、窗口、页面>

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。如图2-1所示

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如图2-2所示

一个小程序页面由四个文件组成，如图2-3所示

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

创建项目启动页，如图2-4所示：

新建一个空白项目，点击 图2-5所示 “+” 创建小程序主体部分的三个文件及pages文件夹，在pages文件夹下新建一个index文件夹，如图2-5所示，选中pages文件夹 右键 新建目录

在index文件夹下创建 indexwxml 、indexwxss 、indexjs 、indexjson 四个文件。

注：除 顶级 目录文件/文件夹使用 图2-5 中的 “+” 创建外，其他文件创建选中其上级目录文件夹 右键 新建目录/文件

创建好文件后，在appjson中写入：

编辑 indexwxml 文件，此处会用到，需在顶级目录创建images文件夹用来存放：

模拟器的机型设置为 iPhone6 ，小程序以IPhone6的屏幕尺寸为设计标准，像素使用 rpx 为单位，编辑 indexwxss 文件：

若使小程序呈现 图2-4 的效果，需编写 appjson 文件：

项目出现如图2-6 所示错误：

编写indexjs：

启动页面就完成了 ^ _ ^

不知道大家有没有遇到小程序，点击左上角 “返回”，一直返回到相同页面的情况。

这个原因大家肯定都知道，是小程序页面栈中，压入了相同的页面。

测试人员提出了这个问题，研究了好久。开始想的是，在页面onhide的时候，直接调用跳转路由。发现这个引发好多问题，不灵。

后来用navigateBack解决了。纪念一下！！！

开启方法：打开微信APP，点击“发现”――“小程序”，点击“我的小程序”，点击编辑按钮，可以调整小程序的位置，也可以删除小程序。

微信使用技巧：1、微信支持自动下载安装包，下载完成后会提示用户进行安装，点击“安装”即可，如果不想使用这个功能可以进入软件的设置界面，点击“通用”选项，将“自动下载微信安装包”关闭即可，关闭这个功能后用户需要在手机自带的应用商店下载安装包。

2、微信支持定时群发功能，在电脑端登录微信公众平台，选择“新建群发”，输入相关内容，在发送界面点击“定时群发”就可以使用这个功能。

资料拓展：2018年5月，为保障用户隐私安全，优化微信外部链接体验，微信团队对《微信外部链接内容管理规范》相关规则进行了进一步升级。微信支持跨通信运营商、跨 *** 作系统平台通过网络快速发送免费（需消耗少量网络流量）语音短信、视频、和文字，2017年11月8日，微信入选中国商业案例TOP30榜单。

把手机h5页面转成微信小程序，可以通过代码实现，方法及详细的 *** 作步骤如下：

1、首先，一个h5页面，其中包含四个文件，如下图所示。

2、其次，由于 *** 作环境不同，为了在编译时和运行时执行一些兼容的 *** 作，需要一个配置文件，如下图所示。

3、接着，编写一个名为“buildjs”的构建脚本，如下图所示。

4、然后，执行先前编写的脚本，如下图所示。

5、最后，手机h5页面就转成了微信小程序，如下图所示。

以上就是关于小白如何利用工具制作自己的h5小程序全部的内容，包括:小白如何利用工具制作自己的h5小程序、微信小程序架构篇、小程序（二） 一个简单的“欢迎”页面等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！