文章目录
前言
提示:
微信小程序,小程序的一种,英文名Wechat Mini Program,
是一种不需要下载安装即可使用的应用,
它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
提示:以下是本篇文章正文内容,下面案例可供参考
一、小程序开发有那几种方式?
套模板、定制开发和行业专用版
1.套模板小程序
就是购买互联网公司的模板小程序。它的优缺点很明显,
优点搭建速度快、价格低;号称三分钟就能搭建上线。
缺点是缺乏个性化、功能不灵活、用户体验较差、售后服务难以保证
2.定制开发小程序
定制开发分两种,
一是自己组建小程序开发团队,
二是委托外包公司做定制开发。
定制开发优点是完全符合需求,要说缺点,就是费钱、耗时间。有多贵,几万到几十万不等,
但贵有贵的好处,好比出自一流设计师的高级定制服装,完全按你的需求开发。适合有特殊的需求的企业开发
3.行业专用小程序
根据你的行业特点,来制作最适合你的小程序。
教育行业就用教育行业的小程序;美妆行业就用美妆行业的小程序。
行业专用小程序,
具备套模板小程序的优点,制作快,
又能避免定制开发小程序的贵,
价格适中,搭建速度快
二、开发环境准备
1.注册账号
1.获取appid(不上线的小程序可以用测试的appid)
申请微信小程序测试号比较简单,访问https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html页面,
管理员扫码登录就可以了。可以查看自己测试账号信息
详情见:资料/02 微信小程序测试号使用教程.mht
2.微信开发工具(必须)
请选择稳定版下载,本教程使用的是:稳定版 Stable Build
注1:此工具集成了公众号网页调试和小程序调试两种开发模式
注2:此工具仅仅做为小程序预览所用,代码开发是在vscode里面编写
3.vscode(个人习惯)
安装插件:
4.谷歌浏览器下载json插件
详情见:资料/03 谷歌浏览器安装json格式化插件.mht
5.微信开发者工具
工具栏设置
设置 外观设置 主题 字体
模拟器
型号 百分比 wifi 模拟操作(类似切前台切后台) 静音 分离窗口 新建 查找 硬盘打开
模拟器下边: 页面路径 场景值 页面参数
编辑器
调试器
小程序模式
普通编译
默认打开首页,后期如果开发非首页页面,可以在这里添加,直接打开开发的页面
预览
真机预览
真机调试
切后台
清缓存
上传
版本管理 (如果项目使用git管理,点击就能看见内置的git管理)
社区
测试号
详情
基础调试库 2.7.5
不校验合法域名
6.微信原生框架目录结构
小程序框架的目标是尽可能通过简单,高效的方式让开发者在微信中开发具有原生app体检的服务
题外话:有微信原生框架(MINA),当然也有非微信原生框架,例如:uni-app/wepy/mpvue
学会原生框架,其它都搞得定,另外,非原生框架会被淘汰,而微信原生框架不会,除非腾讯GG了
1.小程序结构与传统web对比
结构 传统web 小程序
结构 html wxml
样式 css wxss
逻辑 js js(TypeScript)
配置 无 json
2.目录结构
1.主体结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分(即app)由三个文件组成,必须放在项目的根目录,
如下:
文件 必需 作用
app.js 是 小程序逻辑
app.json 是 小程序公共配置
app.wxss 否 小程序公共样式表
2.一个小程序页面由四个文件组成,分别是:
xxx.js 页面逻辑 java=>service
xxx.json 页面配置 vue=>router-view
xxx.wxml 页面结构 html
xxx.wxss 页面样式 css
注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项目是三层、小程序是四层结构(多了一个配置层)
3.项目整体目录结构
pages 页面文件夹
index 首页
logs 日志
utils
util 工具类(mina框架自动生成,你也可以建立一个比如:api)
app.js 入口js(类似于java类中的main方法)、全局js
app.json 全局配置文件
app.wxss 全局样式文件
project.config.json 跟你在详情中勾选的配置一样
sitemap.json 用来配置小程序及其页面是否允许被微信索引
这个应用里面有很多子页面,可以在里面配置,来指定当前页面能否在微信内搜索
只需要在发布时使用
总结
多练多记