我的微信小程序第一篇(入门)

前言

微信小程序出来已经有一段时间了,已经有很多大牛都写过相关教程了,那么我为啥还要写这篇文章呢?其实仅仅是个人对微信开发的一个兴趣吧,觉得是个很有意思的事情,后面有时间可能会发更多关于小程序的文章,刚刚接触,如果哪里写的有问题欢迎大家指正。

准备工作

首先需要下载微信小程序开发者工具

点击链接:

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140&token=&lang=zh_CN进入微信公众平台技术文档界面,点击”下载地址”进入下载页面如图1,点击图1中的“下载地址”进行下载,根据自己电脑实际情况选择win64,win32或者mac版如图2

图1

图2

正文

工具下载完了之后我们就可以真正的开发唠,打开开发者工具(需要用自己微信扫描二维码),我们看到有两个选项,这里选择“本地小程序项目”如图3

图3

添加项目页面,需要一个AppID,申请AppID请参考:

https://jingyan.baidu.com/article/ed15cb1b4e9f4a1be2698149.html

如果没有则选择“无AppID”,在学习阶段没有AppID也是可以的,我这边已经申请了AppID所以我填写了,然后为填写项目名称和目录,添加即可,如图4

图4

添加完成后,我们进入到开发界面,这个时候我们看到项目已经默认生成了一些文件了,且是可以运行的完整项目结构,后续开发也就是在这个基础上进行开发如图5

如图5

默认文件说明:

.wxml:同web开发的html页面,相当于视图页面

.js(index.js,log.js):同web开发的js文件,存放js脚本,一般逻辑处理会放到这里

.wxss:同web开发中的css文件,存放小程序的各种样式,app.wxss存放公共样式

.json配置文件,app.json对微信小程序进行全局配置,包括决定页面文件的路径,窗口的展现,网络超时,多tab等,index.json,log.json分别对index和log部分进行局部配置

编译运行

我们看到页面左边的选项栏“调试”,即可以在开发者工具模拟器上调试并查看运行结果,但是模拟器可能会有误差,所以我们也可以在左边的选项栏中,选择项目,然后点预览会生产一个二维码,用管理员微信号扫一扫,就可以在自己手机上看到运行结果啦~~~

好了,第一次先介绍这么多吧,可能还有很多内容我也没有那么清楚,也没涉及到,在后续的文章中会一一涉及,也希望大家踊跃补充提意见,共同进步,这会儿太困了,洗洗睡了。

时间: 2024-08-10 00:47:34

我的微信小程序第一篇(入门)的相关文章

我的微信小程序第二篇

在上一篇<我的微信小程序第一篇(入门)>中,很多人问我什么是微信小程序,在这里我要说一下这个是我的失误啦,我默认大家都知道微信小程序,其实可能行内人士都知道小程序,好多非行内朋友可能平时不太关注这些,所谓的隔行如隔山,所以,我今天简单介绍下什么是微信小程序? 据说在微信产品经理张小龙的微信朋友圈中介绍到(敲黑板,重点是“据说”噢,因为我没有张小龙微信,哈哈): 小程序是一种不用下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜索一下即可打开,也体现了“用完即走”的理念,用

微信小程序开发的入门教程

广州微信小程序开发公司(www.dthulian.com)品向科技,下面跟大家详细介绍微信小程序开发的入门教程: 开发前准备: 注册小程序帐号 绑定开发者 登录微信公众平台小程序,进入用户身份- 开发者,新增绑定开发者. 已认证的小程序可以绑定不多于20个开发者.未认证的小程序可以绑定不多于10个开发者. 获取AppID下载并安装开发者工具 下载完成后,使用管理员或者绑定的开发者微信号扫码登录. 一个微信小程序 创建项目 我们需要通过开发者工具,来完成小程序创建和代码编辑. 开发者工具安装完成后

【helloworld】-微信小程序开发教程-入门篇【3】

1. 开篇导言 本节目标:通过上一节的讲解,相信大家对小程序框架MINA有了初步了解.接下来将会对其进行深入介绍. 目标用户:无编程经验,但对微信小程序感兴趣的同学. 学习目标:了解MINA框架的目录结构和配置. 案例分析:helloworld小程序. 代码下载 传送门: 目录:微信小程序教程-开篇导言-很快微信小程序社区上一篇:[helloworld]-微信小程序教程-入门篇[2]-很快微信小程序社区    下一篇:[helloworld]-微信小程序教程-入门篇[4]-很快微信小程序社区.

【helloworld】-微信小程序开发教程-入门篇【4】

1. 开篇导言 本节目标:通过上一节的讲解,相信大家对小程序框架MINA的目录结构和配置有了一定的了解.接下来将会讲解视图层,逻辑层及其之间的交互. 目标用户:无编程经验,但对微信小程序感兴趣的同学. 学习目标:了解MINA框架的视图层(View),逻辑层(App Service),及其之间的交互. 案例分析:helloworld小程序. 代码下载 传送门: 目录:微信小程序教程-开篇导言-很快微信小程序社区上一篇:[helloworld]-微信小程序教程-入门篇[3]    下一篇:未开启.

【helloworld】-微信小程序开发教程-入门篇【1】

1. 开篇导言 本节目标:旨在演示如何用开发者工具构建并运行简单的 helloworld 应用. 目标用户:无编程经验,但对微信小程序感兴趣的同学. 学习目标:开发者工具的基本使用流程,即创建.导入.删除.关闭项目. 案例分析:创建helloworld应用,相似于微信官网简易教程中的quickstart demo. 代码下载 传送门: 目录:微信小程序教程-开篇导言-很快微信小程序社区下一篇:[helloworld]-微信小程序教程-入门篇[2]-很快微信小程序社区 备注:有编程经验或看过微信官

helloworld】-微信小程序开发教程-入门篇【2】

1. 开篇导言 本节目标:通过上一节的讲解,相信大家对微信小程序有了初步的了解.接下来将会对小程序的框架进行简单介绍. 目标用户:无编程经验,但对微信小程序感兴趣的同学. 学习目标:了解MINA框架的基本特征,并对数据绑定和页面(Page)有概念上的认识. 案例分析:对于helloworld小程序的进行讲解. 代码下载 传送门: 目录:微信小程序教程-开篇导言-很快微信小程序社区上一篇:[helloworld]-微信小程序教程-入门篇[1]-很快微信小程序社区下一篇:[helloworld]-微

微信小程序开发之入门篇(熟悉项目结构)

微信小程序创建之后会生成一个项目模板,如下图所示(基本如此,但并不局限于此) 现在分别来说明一下每个文件及目录的意思 app.js 程序的入口文件,必须存在. app.js是小程序的脚本代码.我们可以在这个文件中监听并处理小程序的生命周期函数.声明全局变量.调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据. app.json app.json 是对整个小程序的全局配置.我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题.注意该文件

微信小程序工具篇

"工欲善其事必先利其器",在开始新内容的学习之前,往往会对用哪个IDE开发而苦恼.因为自身硬件条件的限制(公司给配的商务笔记本,真心的是中看不中用.也就是便携这么个有点了).所以在选择IDE方面,个人比较追求,高效.快速.低耗的工具.综合网上各位大神的介绍及个人使用经验.对微信原生IDE,EgretWing,sublime text3 进行比较. 1.高效 以上三种IDE 均支持智能提醒.相对sublime text3 较弱.需要安装第三方插件(下载地址见底部).而且sublime t

微信小程序:开发入门及案例详解pdf

下载地址:网盘下载 本书可分为3部分,第一部分作为基础章节,介绍了第一个小程序的搭建流程,让大家能快速上手:同时对小程序框架原理进行了详细介绍,为后面学习组件.API打下基础. 第二部分对小程序组件.API进行介绍,对组件.API的使用.注意事项进行详细讲解,并给出示例代码. 最后一部分精选5个由浅入深的案例,对小程序研发进行实战讲解,涵盖了实际项目中可能涉及的技术方案和使用方法,具备很强的实战意义. 在这本书中,包含了作者在电商领域多年的前端经验总结和对当前主流架构的思考,希望读者们可以从中获