小程序|微信程序开发之小程序入门

一、小程序基本介绍 1、简介

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

注1:其它小程序包括,支付宝小程序/百度小程序/QQ小程序/今日头条+抖音小程序
注2:微信已经有了微信订阅号、微信服务号、微信企业号,微信小程序和这三者有什么不同,微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系
注3:微信官方文档地址:https://developers.weixin.qq.com/doc/
2、小程序开发有那几种方式?
套模板、定制开发和行业专用版
①、套模板小程序
就是购买互联网公司的模板小程序。它的优缺点很明显,
优点搭建速度快、价格低;号称三分钟就能搭建上线。
缺点是缺乏个性化、功能不灵活、用户体验较差、售后服务难以保证
②、定制开发小程序
定制开发分两种,
一是自己组建小程序开发团队,(赔钱货)
二是委托外包公司做定制开发。(电网)
定制开发优点是完全符合需求,要说缺点,就是费钱、耗时间。有多贵,几万到几十万不等,
但贵有贵的好处,好比出自一流设计师的高级定制服装,完全按你的需求开发。适合有特殊的需求的企业开发。
③、行业专用小程序
根据你的行业特点,来制作最适合你的小程序。
教育行业就用教育行业的小程序;美妆行业就用美妆行业的小程序。
行业专用小程序,
具备套模板小程序的优点,制作快,
又能避免定制开发小程序的贵,
价格适中,搭建速度快
二、开发环境准备 1、注册账号 微信公众平台
注册小程序:
小程序|微信程序开发之小程序入门
文章图片

2、获取appid(不上线的小程序可以用测试的appid)申请微信小程序测试号比较简单,访问申请测试号 | 微信开放文档页面,
管理员扫码登录就可以了。可以查看自己测试账号信息

3.微信开发工具(必须) 请选择稳定版下载,本教程使用的是:稳定版 Stable Build
注1:此工具集成了公众号网页调试和小程序调试两种开发模式
注2:此工具仅仅做为小程序预览所用,代码开发是在vscode里面编写
安装好程序,进行登录:
小程序|微信程序开发之小程序入门
文章图片

创建小程序,此处模板选择JavaScript:
小程序|微信程序开发之小程序入门
文章图片

编辑界面:
小程序|微信程序开发之小程序入门
文章图片

微信原生框架目录结构:
小程序框架的目标是尽可能通过简单,高效的方式让开发者在微信中开发具有原生app体检的服务
题外话:有微信原生框架(MINA),当然也有非微信原生框架,例如:uni-app/wepy/mpvue
学会原生框架,其它都搞得定,另外,非原生框架会被淘汰,而微信原生框架不会,除非腾讯GG了
【小程序|微信程序开发之小程序入门】①、小程序结构与传统web对比
结构传统web小程序
结构htmlwxml
样式csswxss
逻辑jsjs(TypeScript)
配置无josn
注1:小程序除了使用JS还可以使用TypeScript进行开发。新问题:JavaScript与TypeScript有什么区别?
TypeScript是Javascript的超集,实现以面向对象编程的方式使用Javascript。当然最后代码还是编译为Javascript
题外话:Angular2是基于typescript来开发的JS框架
②、目录结构
主体结构:
小程序包含一个描述整体程序的 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
loginLogin.vuelogin.html
login.jsjs页面逻辑
login.json无无页面配置
login.wxml