微信小程序前端入门

微信小程序前端入门

文章目录

  • 微信小程序前端入门
    • 项目创建、运行、上传和发布
    • 项目文件结构
    • 微信开发者工具
    • 页面创建与删除
      • 创建
      • 页面代码
        • 页面跳转(三种基本的)
        • tabBar
        • 数据绑定
        • 数据缓存
        • 页面生命周期
        • 跨页面传参
        • v-if, v-else, v-for
        • 网络请求
        • 接口的使用
    • 组件使用
      • 自定义
      • 插件市场
    • 小程序注册相关
    • 常见问题
    • 项目代码


  • 编辑:HBuilderX(标准版,官网:https://dcloud.io/hbuilderx.html)
  • 运行:微信开发者工具
  • 框架:uni-app(官网:https://uniapp.dcloud.io/)
  • 发布平台:微信公众平台(https://mp.weixin.qq.com/)

项目创建、运行、上传和发布

  • 创建:文件->新建->项目,uni-app,默认模板
  • 运行:运行->运行到小程序模拟器->微信开发者工具(最常用)(也可以运行到浏览器上)
  • 上传:运行时,在微信开发者工具中,右上角上传->确定->上传,上传后为开发版(开发版仅体验成员可使用)(必须配置小程序AppID才能上传至微信公众平台,否则上传按钮无法点击)
  • 发布:在微信公众平台,管理->版本管理->将开发版提交审核,审核通过后发布(全量发布)

项目文件结构

创建后的文件目录:

微信小程序前端入门_第1张图片
  • pages:小程序的所有页面代码
  • static:小程序的静态资源,如图片等
  • App.vue:全局变量和全局样式的设置
  • pages.json:管理页面
  • mainfest.json:小程序配置(必须配置基础配置->uni-app应用标识AppID(直接获取)和微信小程序配置->微信小程序AppID(微信公众平台获取,开发->开发管理->开发设置,开发者ID->AppID))(此ID为小程序唯一标识)

微信开发者工具

  • 首次运行时,需在设置->安全中,将服务端口打开

  • 微信小程序前端入门_第2张图片

  • 调试器

    • image-20220216202013422
    • wxml:页面布局
    • styles:页面元素的css样式(可进行修改方便调整UI,但实际代码不会变动,代码要在HbuilderX里改
    • console:控制台,输出程序运行情况
    • AppDate:当前页面的数据,对应HBuilder中页面的data
      微信小程序前端入门_第3张图片
  • 微信小程序前端入门_第4张图片

    • 编译:点击可进行重新编译
    • 预览:点击生成预览二维码,可在手机进行预览
    • 真机调试:点击生成二维码,可在手机进行调试,同时电脑微信开发者工具控制台会实时显示调试信息(有些模拟器没有的bug可以通过真机调试找出;有些组件在iOS和安卓上运行效果不同,也能借此找出)

页面创建与删除

创建

pages文件夹目录下右键->新建页面,默认模板,创建(勾选’在pages.json‘中注册),创建完成时pages.json中会自动注册该页面,如果删除页面需手动在pages.json中删去相关代码

微信小程序前端入门_第5张图片
style是该页的样式;globalStyle是全局样式。style会覆盖掉globalStyle

navigationBarTitleText是页面标题;enablePullDownRefresh,下滑刷新
微信小程序前端入门_第6张图片

页面代码

微信小程序前端入门_第7张图片

template,页面元素,vue编写;script,逻辑代码、函数、数据,js编写;style,css样式

页面跳转(三种基本的)

  • uni.navigateTo() //跳转至非tabBar页面(即含导航栏页面)
    微信小程序前端入门_第8张图片
  • uni.navigateBack() //返回某个页面的接口,不用带参数,默认返回上一层页面
    微信小程序前端入门_第9张图片
  • uni.switchTab() //跳转至tabBar页面
    微信小程序前端入门_第10张图片
    • 注意,switchTab会卸载掉除了tabbar页面以外的全部页面,所以跳转到tabbar页面后无法通过uni.navigateBack返回原来的页面

tabBar

一般不超过5个

微信小程序前端入门_第11张图片

数据绑定

  • v-model(在 ( 标签有多种类型,如 button、select 等等)及