微信程序开发.小程序入门_小程序测试号怎么用

一、微信小程序介绍

1.小程序简介  

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

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

2.小程序开发有那几种方式？

套模板、定制开发和行业专用版

  ①.套模板小程序
    就是购买互联网公司的模板小程序。它的优缺点很明显，
    优点搭建速度快、价格低；号称三分钟就能搭建上线。
    缺点是缺乏个性化、功能不灵活、用户体验较差、售后服务难以保证 

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

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

二、微信小程序的搭建

1.开发环境准备

  ①.注册账号

  ②.获取appid(不上线的小程序可以用测试的appid) 
    申请微信小程序测试号比较简单，访问https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html
    管理员扫码登录就可以了。可以查看自己测试账号信息 

微信公众平台 ：登录即可

就能获取到 ： AppID和AppSecret

  ③.微信开发工具(必须)

Stable Build
    请选择稳定版下载，本教程使用的是：稳定版 Stable Build

直接安装即可： 

    注1：此工具集成了公众号网页调试和小程序调试两种开发模式
    注2：此工具仅仅做为小程序预览所用，代码开发是在vscode里面编写

 4.vscode(个人习惯)

 5.谷歌浏览器下载json插件

2.第一个微信小程序

打开微信扫码登录：

   微信开发者工具创建一个项目(后端服务:不使用云服务)
  ①.打开微信小程序开发工具-建立一个小程序项目-APPID -就可以创建测试项目

可以修改内容： 

  ②.微信小程序测试号设置：
    如果你想跳过网络请求域名验证，你可以勾选设置里的(注意：开发阶段一定要勾选此功           能，不然无法发出请求)

设置->项目设置->勾选 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书” 选项

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

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

3、使用IDEA打开

①、边操作边查看：

 ②、新建登录界面

增加  "pages/login/login"  这一行就会增加

三、相关知识

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

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

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

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

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

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

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

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

    ③.   xxx     
        xxx.js        页面逻辑
        xxx.json      页面配置
        xxx.wxml      页面结构
        xxx.wxss      页面样式
      注1：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名
      注2：为了方便大家记忆，将小程序、SPA(vue)、传统web项目做一个对比
           小程序                   SPA                       传统web    
           login                    Login.vue                 login.html
             login.js               <script></script>         js                页面逻辑
             login.json             无                        无                页面配置
             login.wxml             <template></teamplate>    html标签          页面结构 
             login.wxss             <style></style>           <style></style>   页面样式 
      小结：传统WEB项目是三层、小程序是四层结构(多了一个配置层)

    ④.项目整体目录结构
      pages                  页面文件夹
        index                首页
        logs                 日志
      utils                  
        util                 工具类(mina框架自动生成,你也可以建立一个比如：api)
      app.js                 入口js(类似于java类中的main方法)、全局js
      app.json               全局配置文件
      app.wxss               全局样式文件
      project.config.json    跟你在详情中勾选的配置一样
      sitemap.json           用来配置小程序及其页面是否允许被微信索引
                             这个应用里面有很多子页面,可以在里面配置,来指定当前页面能否在微信内搜索只需要在发布时使用

3.小程序配置文件
  ①.全局配置
    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等 
    注1：小程序页面创建小技巧
         直接修改app.json中的pages添加一个新的元素，按下保存“ctrl+s”即可自动创建4个文件，即生成一个小程序页面
         必须在微信开发者工具才行，vscode不支持此操作(注：vscode添加后微信开发工具也不会编译，然后报错)

  ②.页面配置
    每一个小程序页面也可以使用同名xxx.json文件来对本页面的窗口表现进行配置，
    页面中配置项会覆盖app.json的window中相同的配置项
    注1：即局部变量比全局变量的优先级要高，哪都是如此