福州搜外科技专业从事微信小程序开发、百度智能小程序定制,专业化打造新生态营销渠道、新零售市场。
福州小程序开发-打开客服菜单
福州搜外科技
福州小程序开发首页 > 小程序答疑 > 小程序要如何开发-福州小程序开发为您解答
小程序要如何开发-福州小程序开发为您解答
时间 : 2018-12-11 21:46 浏览量 : 94


在两年前还籍籍无名的小程序,如今已经成为移动互联网的新风口。最早小程序在微信平台上成名,手握 10 亿月活用户的微信,很快成为小程序创业者的掘金之地。


巨头的嗅觉敏锐,支付宝、百度随即跟进,今日头条也开始内测小程序,几大平台纷纷出手,让小程序赛道更加拥挤,小程序生态多元化的背后,是巨头新一轮跑马圈地。


看到各大巨头的大动作,大家有没有一丝丝心动呢。不过小程序要如何开发呢?让福州小程序开发公司为您解答吧。


前端使用 JavaScript 开发小程序,后端使用 Node.js + Express + MySQL。首先用 SQL 脚本建立 MySQL 数据库,数据库名为 orishop。MySQL 用户名是 root,密码是 12345678,也可以使用其他用户名和密码。


下面先看一下本项目的主界面,本项目分为客户端和服务端实现,客户端涉及到轮询图、按钮、图片列表、产品展示、购物车等。

小程序要如何开发小程序要如何开发


2. 轮序图设计

轮序图是在 App 首页上部显示的,用于展示商品信息,可以以一定时间自动切换商品信息。轮序图需要使用 swiper 组件,每一个轮序图 Item 需要使用 swiper-item 组件,通常每一个 Item 是一个图片,可以直接在<swiper-item>中放置一个<image>标签。轮序图的布局代码如下。

小程序要如何开发


3. 控制轮序图

轮序图的布局代码中使用了很多变量来控制轮序图的显示,例如,indicatorDots 用来控制是否显示面板指示点,autoplay 用于控制是否自动切换图像。interval 用于控制切换时间的间隔,duration 用于控制滑动动画时长。这些变量都需要在 index.js 文件的 data 变量中设置,代码如下:

小程序要如何开发



4. 使用 Node.js + Express 连接 MySQL 数据库


由于本项目需要使用服务端,所以在编写客户端的同时,还要编写服务端的程序,这一部分会使用 Node.js + Express 连接 MySQL 数据库,在连接 MySQL 数据库之前,先要创建相关的表和视图。


本项目使用 WebStorm 开发,创建一个名为 service 的工程,接下来在 service 工程中创建 my_connect.js 文件,并输入下面的代码。

小程序要如何开发

接下来测试连接数据库的代码是否正确,在 service 工程的 index.js 文件中添加如下代码。


小程序要如何开发

由于 Node.js 官方提供的模块不支持操作 MySQL 数据库,所以运行本例的代码需要使用下面的命令行安装 MySQL 模块。然后在浏览器地址栏中输入 http://localhost:3000,就会在 WebStorm 的控制台看到输出结果。


5. 从 MySQL 数据库中获取要显示的轮询图信息

在这一部分仍然编写服务端代码,在小程序端需要显示轮询图,轮序图中的数据需要从 v_goods 视图获取,该视图可以得到最热,销售最好的商品信息。接下来在 mysql_connect.js 文件中添加如下代码。

小程序要如何开发


接下来创建路由脚本文件 hnf.js,并添加下面的代码:

小程序要如何开发


接下来在 app.js 中使用下面的代码注册 hnf 路由。

小程序要如何开发


6. 动态显示轮询图

现在修改小程序端的代码,在这一部分会在小程序端通过 wx.request 函数访问上一部分创建的路由,并根据返回数据动态显示轮序图。在 index.js 文件的 onload() 函数中添加下面的代码。


小程序要如何开发


7. 实现导航按钮布局

在轮序图下方是一排导航按钮,效果如下图所示:

小程序要如何开发

导航按钮的布局代码需要添加到小程序工程的 index.wxml 文件中。接下来在 app.wxss 文件中添加如下的样式,其他布局也会用这个样式,所以将该样式添加到全局的 app.wxss 文件中。


小程序要如何开发


在 index.wxss 文件中添加样式代码,每一个按钮占整个宽度的 11%。导航按钮也是动态显示的,数据依赖于 navigationData 变量,可以在 index.js 文件的 data 中添加如下代码来测试导航按钮的布局是否正确,记住,这只是用于测试的代码,在后面的布局会用动态的数据替换这些实验数据。


后面就是进行 动态显示导航按钮、显示推荐商品、以及商品详细信息等。由于篇幅问题,就不在这里提了。小程序是一种“连接场景,即用即走”的工具,在这个奉行效率的时代,小程序可以为商家带来无尽的商机。特别是现在小程序还在发展阶段,仿佛昨日的淘宝店或公众号一般,会为先到者带来庞大的红利。要开发小程序就要赶快了,越早抢占市场对以后的发展就越有利。有兴趣开发小程序的朋友可以联系我们,福州搜外科技将竭诚为您服务。


相关文章

微信小程序要怎么引流

小程序可以和App相互跳转

微信小程序对旅游行业的影响

欢迎在线留言
您的姓名 :
联系电话 :
邮箱地址 :
联系地址 :
留言内容 :
cache
Processed in 0.034590 Second.