小程序初始创建

1. 注册小程序账号

官网:
https://mp.weixin.qq.com/wxopen/waregister?action=step1
在这里插入图片描述

2. 下载小程序

官网:
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
百度网盘(非最新版)
https://pan.baidu.com/s/1_proEw9R5RDxpuRAbgcoJg?pwd=6666

3.新建小程序项目

在这里插入图片描述

生命周期

onLaunch:当小程序初始化完成的时候会触发的onLaunch,只触发一次。
onShow:当小程序启动,或者从后台切前台会触发的生命周期。
onHide : 当小程序从前台进入后台会触发。

页面的生命周期
onLoad :监听页面加载。
onReady :监听页面初次渲染完成。
onShow:监听页面显示。
onHide:监听页面隐藏。
onUnload:监听页面卸载。
onError:脚本错误,或者Api调用失败之后的触发。

页面的相关处理函数

onPullDownRefresh:监听用户下拉动作。
onReachBootom:页面上拉触底事件。
onShareAppMessage:页面右上角分享触发

app.json分析
{ 
// 页面路径
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
entryPagePath

指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填,将默认为 pages 列表的第一项。不支持带页面路径参数。

{
  "entryPagePath": "pages/index/index"
}
pages

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}
window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性类型默认描述
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如
官方文档

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

微信小程序创建空白页的步骤相对简单,主要分为以下几个阶段: 1. 开发环境准备:首先需要下载并安装微信开发者工具,这是开发微信小程序的官方集成开发环境。 2. 创建项目:打开微信开发者工具,选择“小程序项目”并点击“新建项目”。按照向导输入你的AppID(如果没有可以使用测试号),填写项目名称,并选择项目存储位置。 3. 设置目录结构:微信小程序的基础目录结构包括: - pages:存放所有小程序的页面文件。 - utils:存放工具性质的代码。 - app.js:小程序的逻辑。 - app.json:小程序公共设置。 - app.wxss:小程序公共样式表。 在pages目录中,你可以根据需要创建更多的子目录来组织页面文件。 4. 创建空白页面文件:在pages目录中创建一个新的文件夹,例如命名为“blankPage”,在该文件夹内部创建四个文件:blankPage.wxml(页面结构)、blankPage.wxss(页面样式)、blankPage.js(页面逻辑)、blankPage.json(页面配置)。初始状态下,这些文件可以是空的,或者可以只包含最基础的代码。 5. 配置页面信息:在app.json文件中,需要将新创建的页面添加到pages数组里,这样微信小程序框架才能识别并加载这个空白页面。例如: ```json { "pages": [ "pages/blankPage/blankPage" ], ... } ``` 6. 调试与预览:在微信开发者工具中,你可以点击“编译”按钮查看是否出现编译错误。如果没有错误,你可以在模拟器或者真机上预览你的空白页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值