时隔两年,我开始学习微信小程序了~~仿小米手机天气预报

简介: 时隔两年,我开始学习微信小程序了~~仿小米手机天气预报

前言:

两年前,小程序出来时,我并不感兴趣,因为那时我在学习Android,根本没时间去研究小程序,那时并不看好小程序,因为各种限制;时隔两年,小程序已经很火了,所以还是跟着时代走吧!

一、学习小程序离不开官方文档,从注册小程序到入门,官网都有很详细的介绍;

微信小程序开发相关资料:

小程序官方文档:https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=2018313

小程序官方开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=20171117
微信小程序开发资源汇总:https://github.com/justjavac/awesome-wechat-weapp 二、小程序基本概念

1、开发工具:为了配合小程序开发,微信专门配备了自己的开发工具,自行选择对应版本安装。

image.png

2、创建项目应用:依次填好 项目目录、AppID、项目名称、最后勾选建立普通快速启动模板

image.png

3、编写小程序:项目初始化并包含了一些简单的代码文件,其中app.js、app.json、app.wxss 这三个是必不可少的,小程序会读取这些文件初始化实例。
  app.js是小程序的初始化脚本,可以在这个文件中监听小程序的生命周期,申请全局变量和调用API等
  app.json是对小程序的全局配置,pages设置页面路径组成(默认第一条为首页),window设置默认页面的窗 口表现等

  app.wxss 是整个小程序的公共样式表。类似网站开发中的common.css

image.png

4、创建页面:在pages目录下

三、个人小项目,边学边做---仿小米手机天气预报

效果如下:

(首页)

image.png

(个人中心)

image.png

github项目地址:https://github.com/zsml2016/wxProgram

相关文章
|
10天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
111 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
1月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
1月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
2月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
86 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
16天前
|
小程序
如何将CCBUPT全能墙小程序添加到手机桌面
如何将CCBUPT全能墙小程序添加到手机桌面
20 0
|
2月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
2月前
|
存储 前端开发 算法
|
2月前
|
存储 小程序 JavaScript
|
5天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
54 3
|
12天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
28 0
微信小程序更新提醒uniapp