小程序简介

小程序简介：

    小程序 是2017年度百度百科十大热词之一；微信小程序，简称小程序，英文名：Mini Program 是一种不需要下载安装即可使用的应用（实际上需要安装的，只不过小程序体积特别小，下载速度很快，用户感受不到下载的过程）；

    小程序刚发布的时候要求压缩包的体积不能大于1M，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M；

    2017年1月9日0点，微信第一批小程序低调上线；

 

小程序可以干什么？

    1.同App进行互补，提供同app类型的功能，比app使用方便简洁；

    2.通过扫一扫或者微信搜索即可下载；

    3.用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选；

    4.连接线上线下；

    5.开发门槛低，成本低；（1-2周 实现从 0-1）

 

小程序开发相关资料

    1.官网进入到 微信公众平台，账号注册（注意：每个邮箱仅能申请一个小程序）

    2.开发工具安装；

    3.储备知识：

            Flex布局简介-菜鸟教程；（flex---伸缩盒模型）

 

            移动端相关知识：

                物理像素；（真实存在的）

                    1.屏幕分辨率；（屏幕分辨率越高，屏幕越清晰，即同一个屏幕上分辨率越高，物理像素点小而多，呈现出来的就越清晰）

                    2.设备能控制显示的最小单元，可以把物理像素看成是对应的像素点；

                设备独立像素 （一般是iphone6/7/8，宽-375和高-667）& css像素--px；（虚拟像素）

 

            dpr 比 & DPI & PPl

                dpr：设备像素比：物理像素/设备独立像素 = dpr，一般以iphone6的dpr为准，dpr = 2，则可以推出其对应的物理像素为750 x 1344

 

            移动端适配方案

                viewport 适配：

                    为什么做viewport?

                        1.手机厂商在生产手机的时候大部分手机默认页面宽度为980px（现在没有了，互联网刚新起时，用的塞班系统-诺基亚，摩托罗拉）;

                        2.手机实际视口宽度都要小于980px，如iphone6 为375px；

                        3.开发需求，需要将980px 的页面完全显示在手机屏幕上而且没有滚动条；

                            视觉视口--所见即所得，看到的大小

                            布局视口--页面

                            完美视口--即视觉视口和布局视口大小一样

                    实现：

                        <meta name="viewport" content="width=device-width, initial-scale=1.0">

                rem适配：

                    为什么？

                        1.机型太多，不同的机型屏幕大小不一样；

                        2.需求：一套UI设计稿的内容在不同的机型上呈现的效果一样，根据屏幕大小不同的变化，页面中的内容也相应变化；

                    实现：

                        根节点

                        function remRefresh() {}

                        第三方库实现

 

    小程序语法特点汇总：

        1.没有DOM

        2.组件化开发：具备特定功能效果的代码集合；

            在vue 和 react 中都有这个组件化开发的概念；

            还有一个js模块化开发（具有特定功能的js文件，有目的的拆分，需要哪个功能引入哪个js模块）；

            组件和页面的关系：页面里有一个或者多个组件，但是说一个组件是一个页面就不对了；

            在react中操作的是虚拟DOM；

        3.体积小，单个压缩包体积不能大于2M，否则无法上线；

        4.小程序的四个重要文件：

            1.  *.js

            2.  *.wxml--->view 结构 ---> html

            3.  *.wxss ---> view 样式 ----> css

            4.  *.json ----> view 数据 ----> json文件，配置文件；

        5.小程序适配方案：rpx（responsive pixel 响应式像素单位）；

            1.小程序适配单位：rpx;

            2.规定任何屏幕下宽度为 750rpx;

            3.小程序会根据屏幕的宽度不同自动计算 rpx值的大小；

            4.iphone6 下： 1rpx = 1 物理像素 = 0.5px

 

    小程序开发工具使用介绍：

       1.因为之前的被冻结了，找回很麻烦，所以申请一个126邮箱用来注册开发

        2.进入微信公众平台 然后用新的邮箱注册一个小程序；原始ID： gh_599d59ffsdfad

        3.下载微信开发者工具；（下载稳定版，地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html）

            也可以继续向下访问然后下载更旧的版本；

        4.首次的话，我们没有项目，所以是新建小程序，首先在合适的位置创建我们需要开发小程序的代码目录：C:Usersvendeguoswechat_codewechat_demo1； 然后填写appid 需要打开公众平台的: 开发-->开发管理-->开发设置  就会有AppID(小程序ID)，每个人的都不一样，不能公用；开发模式：小程序，因为插件不完整；后台服务：不使用云服务；语言：JS  或者 TS， 一般都是JS；接着点击新建即可；打开之后主要使用：模拟器，编辑器，调试器；

        有个预览，会把代码上传到腾讯服务器，成功后返回一个二维码，然后我们扫码就可以真机体验了；但是这个时候只有自己能扫码体验，如果希望别的小伙伴也能体验，就需要去官网上的: 管理-->成员管理--->管理员/项目成员(用于开发)/体验成员， 在体验成员添加好友账号即可；

 

    小程序项目初始化文件介绍：

        1.项目配置文件：project.config.json 这里面需要经常改的也就是appid和projectname， 其他的都可以使用图形界面  详情-->本地设置；

        2.sitemap.json ： 新增的文件，之前是没有的，可以在小程序后台，找到文档去看，文档-->框架-->小程序配置--->sitemap配置，就是为了增加小程序的曝光率；

        3.微信开发者工具怎么修改主题颜色（白色的话太刺眼，想暗一些），最上面的工具栏有个：设置--->外观设置--->主题 会有radio选项；

        4.app.json -->  项目的全局配置文件；