微信小程序介绍

  1. 小程序开发流程 1. 需要申请账户 2. 需要下载开发工具 3. 必须需要ssl证书 4. 事件绑定,ajax请求,api的使用 5. 上传代码 6. 提交审核(不要诱导分享,虚拟支付,抽提成千分之6) 7. 发布。 注意:小程序的名称是唯一的,个人小程序上线体验人数是15人
  2. 项目目录: 每个页面是由四个文件构成js,json,wxml,wxss js页面逻辑,json页面配置项,wxml页面结构,wxss页面样式
  3. 页面配置: 页面配置项与全局配置项没有什么差别只是配置的位置是不一样的页面配置是在每一个页面上的json文件配置的,全局的是在app.json文件进行配置编写
  4. 生命周期: 小程序生命周期: onlaunch:监听小程序初始化,小程序初始化完成时。 onShow:监听小程序显示,小程序启动或从后台进入前台显示时。 onHide:监听小程序隐藏,小程序从前台进入后台时。 onError:错误监听函数小程序发生脚本除外,或者api调用失败时触发,会带上错误信 息。 onPageNotFound:页面不存在,监听小程序要打开的页面不存在时触发,会带上页面信息回调该函 数。 页面生命周期: onLoad:监听页面加载。 onReady:监听页面初次渲染完成。 onSow:监听页面显示。 onHide:监听页面隐藏。 onUnload:监听页面卸载
  5. 全局数据: globalData 调用方法getApp()
  6. 跳转方法: wx.switchTab();跳转到tabBar页面,并关闭其他所有非tabBar页面。 wx.reLaunch();关闭所有页面,打开到应用内的某个页面。 wx.redirectTo();关闭当前页面,跳转到应用内的某个页面。但是不能跳转到tabBar页面。 wx.navigateTo();保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页 面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。 wx.navigateBack();关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages获取当前的页面栈,决定需要返回几层。
  7. 本地存储: 异步: wx.setStorage:将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内 容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。 wx.removeStorage:从本地缓存中移除指定 key。 wx.getStorageInfo:获取当前本地存储的全部信息。 wx.getStorage:通过key从本地存储获取指定的信息。 wx.clearStorage:清除当前本地全部的信息。 同步: wx.setStorageSync:将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对 应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。 wx.removeStorageSync:从本地缓存中移除指定 key。 wx.getStorageInfoSync:获取当前本地存储的全部信息。 wx.getStorageSync:通过key从本地存储获取指定的信息。 wx.clearStorageSync:清除当前本地全部的信息。
  8. 自定义组件的使用方法: 在需要引入的页面的json配置文件里进行配置 通过usingComponents进行配置。:前是自定义组件名称,:后是组件的路径。配置完成后通过自定义组件名称进行调用即可
  9. 小程序组件库: vant weapp 使用方法: 首先要在开发者工具菜单栏打开工具-->构建npm 然后就在项目文件下打开cmd命令行工具输入 npm i @vant/weapp -S --production 安装完成后修改app.json,将 app.json 中的 "style": "v2" 去除 不去除的话会造成组件样式紊乱,因为小程序的新版基础组件强行 加上了许多样式,难以覆盖 修改project.config.json,开发者工具创建的项目, miniprogramRoot 默认为 miniprogram,package.json 在其外 部,npm 构建无法正常工作需要手动在 project.config.json 内添 加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。 { ... "compilerOptions": { ... "baseUrl": ".", "types": ["miniprogram-api-typings"], "paths": { "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"] }, "lib": ["ES6"] } } 注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为./即可
经验分享 程序员 微信小程序 职场和发展