微信小程序开发流程

开发流程

  1. 在微信公众平台上注册小程序,获取appId
  2. 下载微信开发者平台,点击文件=> 新建项目,创建小程序。

结构介绍

  1. 基本结构由三大部分组成:主体部分(app.js、app.json、app.wxss)、页面(pages)、自定义工具(utils)
  2. app.json: 小程序全局配置,pages配置所有页面路径,windows配置顶部,全局的默认窗口表现
  3. app.wxss: 整个小程序的公共样式表, 具有 CSS 大部分特性
  4. app.js:app.js文件中 APP() 函数用来注册小程序,onLaunch()应用程序开始,会在打开应用时执行,监听小程序初始化, onShow()监听小程序显示,onShow()监听小程序隐藏

小程序中安装插件

  1. npm init 初始化项目生成package.json
  2. npm install 安装

路由

wx.switchTab(); // 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
wx.reLaunch(); // 关闭所有页面,打开到应用内的某个页面。
wx.redirectTo(); // 关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面
wx.navigateTo(); //保留当前页面,跳转到应用内的某个页面(如:跳转到子页面),但是不能跳到 tabbar 页面
wx.navigateBack(); // 关闭当前页面,返回上一页面或多级页面,默认返回上一级。

页面生命周期

复制代码
Page({
  onLoad() {} // 页面加载时触发,一般在onLoad中发送异步请求来初始化页面数据
  onShow() {}  // 页面显示时触发
  onHide() {} // 是页面隐藏时触发
  onUnload() {} //页面卸载(关闭)时触发
})

组件生命周期

复制代码
Component({
  // 组件自身
  lifetimes: {
    attached() {} // 在组件实例进入页面节点树时执行
    detached () {} // 在组件实例被从页面节点树移除时执行
  },
  // 组件所在的页面
  pageLifetimes: {
    show () { } // 页面被展示
    hide () { } // 页面被隐藏
    resize (size) { } // 页面尺寸变化
  }
})

后台请求

复制代码
wx.request({
  header: object,
  url: "https://baidu.com",
  data:string/object,
  method: "GET/POST",
  dataType: "json",
  success () {},
  fail () {}
});

注意事项:

  1. 背景图片:只支持线上图片和base64图片,不支持本地图片。(建议小图片用base64,大图片存储在数据库,或者以image形式显示)
  2. tabbar: icon不能用svg,要用png 或者 jpg。
相关推荐
2501_915918414 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域5 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷5 小时前
第一个小程序
小程序
春哥的研究所5 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld5 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点6 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖11 小时前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发12 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°14 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero14 小时前
微信小程序91~100
微信小程序·小程序