使用uni-app实现商城用户移动端入门

了解微信小程序

百度百科:

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。

微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与我们一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升。 [1]

2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。

2018年2月，微信官方发布公告称：已对涉及假货高仿、色情低俗和违规“现金贷”等超过2000个微信小程序，进行永久封禁处理。

2019年8月9日，微信向开发者发布新能力公测与更新公告，微信PC版新版本中，支持打开聊天中分享的微信小程序。

小程序的特点：

• 小程序是一种不需要下载安装即可使⽤的应⽤，它实现了应⽤ “触⼿可及” 的梦想。
• ⽤户扫⼀扫或者搜⼀下即可打开应⽤，也体现了 “⽤完即⾛” 的理念。
• 用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又 无需安装卸载 。

目前微信小程序已经非常的成熟，依托于微信平台，我们常用的一些应用也都有了小程序。

应用示例

虽然开发微信小程序可以使用工具提供的测试号，但是测试号提供的功能及其有限，而且使用测试号开发的微信小程序不能上架发布.因此如果想开发一个可以上架的微信小程序，首先必须要申请微信开发者账号.个人申请和使用微信开发者账号是免费的.如果要开发的是商用小程序，那么就需要以企业身份申请微信开发者账号，而且还需要缴纳认证费用.

注册微信开发者账号

浏览器访问 微信公众平台https://mp.weixin.qq.com/，点击立即注册。

扫码注册或者

账户类型选择小程序，并填写邮箱账号信息.点击注册之后，通过邮件验证完成注册

选择小程序

填写邮箱账号密码

填写邮箱

登录邮箱进行邮件注册验证

选择主体类型为个人

登记主体信息

填写小程序信息

添加服务类目

获取AppID和密钥

开发微信小程序必须用到APPID和密钥，这两个东西可以在微信开发者平台上面获得.在网页中找到开发管理栏目，选择开发设置选项卡，在面板中找到自己小程序对应的APPID和密钥

安装微信小程序开发工具

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

• 下载稳定版软件
• 执行默认安装之后，扫码登陆小程序工具
• 开放小程序服务端口(打开设置-->通用设置)

安装HBuilderX软件

下载地址：https://www.dcloud.io/hbuilderx.html

安装微信小程序：链接：https://pan.baidu.com/s/165Qa2E_Ysikjrb5KNPcCAg?pwd=xd12 提取码：xd12

推荐使用提供的HBuilderX版本,已集成大量插件

设置微信开发者工具路径

创建小程序项目

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

1.在HBuilderX上面，创建teams-wx项目，选择uni-app

2.在manifest.json文件中填写注册小程序APPID

3.启动微信开发者工具，并扫码登录

4.选择运行微信小程序

5.微信小程序模拟器启动成功

点击预览，可以通过扫码在真机进行查看微信小程序效果

初始Uni-app项目

1. uni-app项目创建出来后，目录结构如下

6、在pages下创建4个同名目录的vue页面

7、在static文件夹下创建tab_icons文件夹，并在此文件夹下添加首页、分类、购物车、我的图片

cate.png

cart-active.png

cart.png

my-active.png

home.png

cate-active.png

home-active.png

my.png

8、把pages.json文件的home启动页提到第一个，并编辑tabBar

{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/home/home", "style" : { "enablePullDownRefresh": false } } ,{ "path" : "pages/car/car", "style" : { "enablePullDownRefresh": false } } ,{ "path" : "pages/cate/cate", "style" : { "enablePullDownRefresh": false } } ,{ "path" : "pages/my/my", "style" : { "enablePullDownRefresh": false } }, { "path" : "pages/demo/demo", "style" : { "enablePullDownRefresh": false } }, { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ], "globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "优选商城", "navigationBarBackgroundColor": "#C00000", "backgroundColor": "#F8F8F8" }, "tabBar":{ "selectedColor":"#C00000", "list":[ { "pagePath": "pages/home/home", "iconPath":"static/tab_icons/home.png", "text":"首页", "selectedIconPath":"static/tab_icons/home-active.png" }, { "pagePath": "pages/cate/cate", "iconPath":"static/tab_icons/cate.png", "text":"分类", "selectedIconPath":"static/tab_icons/cate-active.png" }, { "pagePath": "pages/car/car", "iconPath":"static/tab_icons/cart.png", "text":"购物车", "selectedIconPath":"static/tab_icons/cart-active.png" }, { "pagePath": "pages/my/my", "iconPath":"static/tab_icons/my.png", "text":"我的", "selectedIconPath":"static/tab_icons/my-active.png" } ] } }

9、编辑home.vue文件、car.vue文件、cate.vue文件、my.vue文件

home.vue文件

<style lang="scss"> </style>

car.vue文件

<style lang="scss"> </style>

cate.vue文件

my.vue文件

10、点击运行运行微信开发者工具

11、运行结果