了解微信小程序

百度百科:

微信小程序，小程序的一种，英文名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文件

<template>
    <view>
        首页
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style lang="scss">

</style>

car.vue文件

<template>
    <view>
        购物车
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        }
    }
</script>

<style lang="scss">

</style>

cate.vue文件

<template>
    <view>
        分类
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>

</style>

my.vue文件

<template>
    <view>
        我的
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>

</style>

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

11、运行结果