1. 各类app
- 微信小程序 运行于微信上
- 原生app
- 直接运行于手机上
- ios端开发语言:object-c / swift / js
- android端开发语言:java
- 混合app:直接运行于手机上,性能比较差,给webapp加上一层壳,让它可安装与手机上
- webapp :运行于app上,没有跨平台
2. 微信开发者工具创建初始项目的文件及其意义
- 全局项目
- :存放所有的页面
- page.js (必须)
- page.wxml 布局 (必须)
- page.wxss 样式(可选)
- page.json 页面配置 (可选,)
- :存放所有的工具类
- :小程序的入口文件(业务逻辑)
- onlaunch函数:,小程序打开时执行,只执行一次
- onshow:当前界面的前台运行
- onhide:后台隐藏
- :小程序的配置文件、
- pages:页面路径列表
- windows:全局的窗口默认表现。如标题,颜色等
- tabber:配置导航栏
- networkTimeout:网络延迟相关
- debug:是否开启调试模式(默认关闭)
- :公共的css样式
- :类似package.json文件
- index.js()
- data
- onload:类似created
- onready:类似mounted
- onshow:当前页面是否激活显示
- onhide:当前页面隐藏
- onunload:卸载页面
- onpulldownrefresh:下拉刷新
3. 微信小程序的组成
- javascript
- ECMAscript+DOM+BOM
- node.js
- ECMAscript+全局成员+系统模块
- 小程序
- ECMAscript+网络+文件+其他文件
4. app.json中的一些功能
- pages中添加路径,自动添加pages配置好的文件
- window中可设置一些样式 更多详情配置api见https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
5. vscode 写微信小程序需要安装的插件
- vscode weapp api( API 提示及代码片段)
- vscode wxml
- vscode-wechat
- Easy WXLESS
- minapp
- wechat-snippet
- wxml
1、数据绑定与数据遍历
数据绑定使用插值表达式()
数据遍历,
遍历通过自定义item,,绑定key值。注意必须加
2. 事件绑定
基本用法:bind+事件类型,如为输入内容绑定事件,bindtap为点击事件
3.双向数据绑定
获取数据时与vue不同
- vue:this.msg
- 小程序:this.data.msg
小程序里面没有双向数据绑定,只能手动设置
- 修改数据
- 同步表单数据
4.流程控制if和hidden
- (相当于v-if)
- (相当于v-show)
5.template模板语法与wxs
5.1 模板
- 定义模板
- 使用模板
5.1 wxs
wxs 类似于script写在wxml最后面
使用方法如下:
mp:mini program缩写,mpvue是基于vue开发小程序的前端框架。它修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。
1.基础使用
- 全局安装好vue/cli
- 命令快速初始化项目
- 在项目中npm install安装依赖包
- npm run dev运行。
- 可视化在微信开发者工具中导入项目即可
2.新建组件
mpvue中无法在app.json的pages中直接加组件路径; 新建组件步骤如下
- 项目的pages目录下复制一份组件修改好
- app.json的pages中手动配置
- 做完这两部不会智能编译,
- 克隆vant-weapp组件库
- 将dist目录下的所有文件复制到项目下的目录下
- 打开微信开发工具将勾选
- 在需要使用vant的文件的main.json文件中写入
- 在wxml中就可以直接使用vant组件了,如
1.技术栈
- :vue-cli+webpack+axios+vue-router+ui(vant)+less+vuex
- :mpvue+webpack+flyio(也可以使用wx原生的wx.request(),)+原生组件+ui(vant-weapp)+less+vuex
2.基本用法
- 安装flyio:
- 将fly.js引入main.js,创建实例化对象然后挂载到vue原型上
3. flyio封装用法
- 先自己在目录
- 再在全局的main.js中引入即可
这样做的在于