从0到1搭建一个简易微信小程序

1、安装微信开发者工具（过程略）

2、创建第一个微信小程序

输入已申请好的微信小程序的AppID

3、工程界面目录结构简介：

4、 app.js 页面数据交互

App() 为程序方法入口；

onLaunch()方法只会在app创建后调用一次；

globalData内部可以配置全局的变量数据

5、app.json 页面配置

6. 新建第一个业务功能页面

在pages文件夹下新建文件夹，如tools,然后在tools文件夹下选择新建page，会在tools文件夹下自动创建好四个文件，如下图：

然后会看到app.json中已自动加入子页面路径：

最后，重点看下新建的子页面Page()的生命周期

tools.js:

// pages/tools/tools.js

Page({

/**

* 页面的初始数据

data: {

/**

* 生命周期函数--监听页面加载

onLoad: function (options) {

/**

* 生命周期函数--监听页面初次渲染完成

onReady: function () {

/**

* 生命周期函数--监听页面显示

onShow: function () {

/**

* 生命周期函数--监听页面隐藏

onHide: function () {

/**

* 生命周期函数--监听页面卸载

onUnload: function () {

/**

* 页面相关事件处理函数--监听用户下拉动作

onPullDownRefresh: function () {

/**

* 页面上拉触底事件的处理函数

onReachBottom: function () {

/**

* 用户点击右上角分享

onShareAppMessage: function () {

}

})

7、写在最后：

作为一个后端开发，以上纯属一个前端小白的兴趣使然，自己参考微信小程序API文档，亲自实践后的个人理解，贻笑前端高手大佬。持续学习，持续更新！

从0到1搭建一个简易微信小程序相关推荐

vue+uni-app商城实战 | 第一篇：从0到1快捷开发一个商城微信小程序，无缝接入OAuth2实现一键授权登录
一. 前言本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...
手把手教你搭建Mac环境微信小程序的本地测试服务器
问题的提出 Mac环境方便快捷地搭建小程序的测试服务器小程序对于网络请求的URL的特殊要求不能出现端口号不能用localhost 必须用https 主要步骤用json-server搭建简单的 ...
基于Vue实现一个简易的小程序框架，浅谈kafka | 每日掘金第 194 期
Hello,又到了每天一次的下午茶时间.酱酱们的下午茶新增优质作者介绍和码上掘金板块,专注于发掘站内优质创作者和优质内容,欢迎大家多提宝贵意见! 酱酱们的下午茶全新改版,欢迎大家多提宝贵意见! 本文字 ...
从零开发简易微信小程序
** 从零开发简易微信小程序 ** 某日,心血来潮,想捣鼓下微信小程序,尝试微信的云开发功能,于是就有了下面简单的成品: 本小程序的包含三部分的功能: 1.商品banner图片的展示 2.商品列表的展 ...
如何做一个基于微信小程序的打卡签到
要做一个基于微信小程序的打卡签到系统,可以按照以下步骤进行: 创建小程序:在微信公众平台上注册小程序账号,创建一个新的小程序. 设计打卡签到功能:根据需求,设计打卡签到的功能模块,包括签到按钮.签到时 ...
“微天气” - 一个基于微信小程序的智能天气预报体验
"微天气" - 一个基于微信小程序的智能天气预报体验一.引言微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生 ...
快速搭建自己的微信小程序商城【免费(无需积分/C币)】
关键词:微信小程序商城源码免费下载,小程序商城,小程序源码,微信商城,商城源码,免费下载,源码下载快速搭建自己的微信小程序商城 1.下载安装微信开发者工具 2.下载商城源码模板1 模板2 3.将源 ...
一个收到微信小程序内测的号，竟然300万起拍卖
一个收到微信小程序内测的号,竟然300万起拍卖毛驴哥IM 2016-09-24 20:19 这两三天,毛驴哥的朋友圈.QQ空间动态基本上被微信的小程序霸占头条刷屏了. 很多人认为这又是一个蓝海市场, ...
搭建Vue3开发微信小程序
搭建Vue3开发微信小程序目前仅支持 cli 方式创建支持 vue3 默认模板项目. 步骤一:全局安装vue-cli npm install -g @vue/cli 步骤 2: 用如下的命令创建vu ...

从0到1搭建一个简易微信小程序

从0到1搭建一个简易微信小程序相关推荐

最新文章

热门文章