微信小程序开发.小程序入门(上)

1.小程序简介  

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

  注1:其它小程序包括,支付宝小程序/百度小程序/QQ小程序/今日头条+抖音小程序
  注2:微信已经有了微信订阅号、微信服务号、微信企业号,微信小程序和这三者有什么不同
            微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系
  注3:微信官方文档地址:https://developers.weixin.qq.com/doc/


2.小程序开发有那几种方式?
  套模板、定制开发和行业专用版
  1.套模板小程序
    就是购买互联网公司的模板小程序。它的优缺点很明显,
    优点搭建速度快、价格低;号称三分钟就能搭建上线。
    缺点是缺乏个性化、功能不灵活、用户体验较差、售后服务难以保证 

  2.定制开发小程序
    定制开发分两种,
    一是自己组建小程序开发团队,(赔钱货)
    二是委托外包公司做定制开发。(电网)
    定制开发优点是完全符合需求,要说缺点,就是费钱、耗时间。有多贵,几万到几十万不等,
    但贵有贵的好处,好比出自一流设计师的高级定制服装,完全按你的需求开发。适合有特殊的需求的企业开发

  3.行业专用小程序  
    根据你的行业特点,来制作最适合你的小程序。
    教育行业就用教育行业的小程序;美妆行业就用美妆行业的小程序。
    行业专用小程序,
    具备套模板小程序的优点,制作快,
    又能避免定制开发小程序的贵,
    价格适中,搭建速度快


开发环境准备
 微信小程序开发.小程序入门(上)_第1张图片下载一个微信开发者工具

打开APP   我们新建项目的时候不要选择云开发,不然代码就托管到腾讯云上面了 

微信小程序开发.小程序入门(上)_第2张图片

编辑界面

微信小程序开发.小程序入门(上)_第3张图片

可以修改内容:  

微信小程序开发.小程序入门(上)_第4张图片

 通过设置,不校验域名

微信小程序测试号设置:
    如果你想跳过网络请求域名验证,你可以勾选设置里的(注意:开发阶段一定要勾选此功能,不然无法发出请求)
    不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书” 选项

微信小程序开发.小程序入门(上)_第5张图片

微信小程序测试号预览功能

  注:小程序传统开发模式和云开发模式的对比
  个人拙见:还是传统开发模式(即自建服务器)比较好,如果云开发、数据全在腾讯,生死不在你手,如果想切换到其它的小程序

新增页面(在app.json中添加pages/register/register就会自动创建register)

微信小程序开发.小程序入门(上)_第6张图片

 与之有关的信息

微信开发者工具
  工具栏设置    
  设置  外观设置  主题 字体

  模拟器
  型号 百分比  wifi  模拟操作(类似切前台切后台) 静音 分离窗口 新建 查找 硬盘打开
  模拟器下边: 页面路径 场景值 页面参数
        
  编辑器

  调试器
  小程序模式        
  普通编译  
  默认打开首页,后期如果开发非首页页面,可以在这里添加,直接打开开发的页面
  预览 
  真机预览
  真机调试
  切后台
  清缓存
  上传
  版本管理 (如果项目使用git管理,点击就能看见内置的git管理)
  社区
  测试号
  详情
  基础调试库  2.7.5
  不校验合法域名

6.微信原生框架目录结构
  小程序框架的目标是尽可能通过简单,高效的方式让开发者在微信中开发具有原生app体检的服务

  题外话:有微信原生框架(MINA),当然也有非微信原生框架,例如:uni-app/wepy/mpvue
          学会原生框架,其它都搞得定,另外,非原生框架会被淘汰,而微信原生框架不会,除非腾讯GG了         

  1.小程序结构与传统web对比
    结构        传统web         小程序
    结构        html            wxml
    样式        css             wxss
    逻辑        js              js(TypeScript)
    配置        无              josn

    注1:小程序除了使用JS还可以使用TypeScript进行开发。新问题:JavaScript与TypeScript有什么区别?
         TypeScript是Javascript的超集,实现以面向对象编程的方式使用Javascript。当然最后代码还是编译为Javascript 
         题外话:Angular2是基于typescript来开发的JS框架    

  2.目录结构
    1.主体结构
      小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
      一个小程序主体部分(即app)由三个文件组成,必须放在项目的根目录,如下:
      文件            必需     作用    
      app.js            是       小程序逻辑
      app.json          是       小程序公共配置
      app.wxss          否       小程序公共样式表    

    2.一个小程序页面由四个文件组成,分别是:
      xxx     
        xxx.js        页面逻辑
        xxx.json      页面配置
        xxx.wxml      页面结构
        xxx.wxss      页面样式
      注1:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名
      注2:为了方便大家记忆,将小程序、SPA(vue)、传统web项目做一个对比
           小程序                   SPA                       传统web    
           login                    Login.vue                 login.html
             login.js                       js                页面逻辑
             login.json             无                        无                页面配置
             login.wxml