我的微信小程序第一篇(入门)
前言
微信小程序出来已经有一段时间了,已经有很多大牛都写过相关教程了,那么我为啥还要写这篇文章呢?其实仅仅是个人对微信开发的一个兴趣吧,觉得是个很有意思的事情,后面有时间可能会发更多关于小程序的文章,刚刚接触,如果哪里写的有问题欢迎大家指正。
准备工作
首先需要下载微信小程序开发者工具
点击链接:
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部分进行局部配置
编译运行
我们看到页面左边的选项栏“调试”,即可以在开发者工具模拟器上调试并查看运行结果,但是模拟器可能会有误差,所以我们也可以在左边的选项栏中,选择项目,然后点预览会生产一个二维码,用管理员微信号扫一扫,就可以在自己手机上看到运行结果啦~~~
好了,第一次先介绍这么多吧,可能还有很多内容我也没有那么清楚,也没涉及到,在后续的文章中会一一涉及,也希望大家踊跃补充提意见,共同进步,这会儿太困了,洗洗睡了。

我的微信小程序第一篇(入门)的更多相关文章
- 我的微信小程序第二篇
在上一篇<我的微信小程序第一篇(入门)>中,很多人问我什么是微信小程序,在这里我要说一下这个是我的失误啦,我默认大家都知道微信小程序,其实可能行内人士都知道小程序,好多非行内朋友可能平时不 ...
- 史诗手册!微信小程序新手自学入门宝典!
一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...
- 【微信小程序】转载:微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下 ...
- 微信小程序实战篇:商品属性联动选择(案例)
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- < ...
- 微信小程序笔记整理--入门篇。
7-2 微信小程序入门篇 准备篇 1.登录网址,https://mp.weixin.qq.com 注册一个微信小程序. 2.获取微信小程序appid,登录自己的小程序后台,在开发者设置中获得appid ...
- 微信小程序开发之入门篇(熟悉开发工具)
个人的每一篇博文都谈不上有什么技术含量,只是为了帮助不熟悉微信小程序开发的自己及他人提供一下思路.谢谢,下面开始! PS: 因为本人没有小程序的内测资格,所以所有的开发及Demo都是无AppId的,如 ...
- 微信小程序开发之入门篇(熟悉项目结构)
微信小程序创建之后会生成一个项目模板,如下图所示(基本如此,但并不局限于此) 现在分别来说明一下每个文件及目录的意思 app.js 程序的入口文件,必须存在. app.js是小程序的脚本代码.我们可以 ...
- 前端微信小程序实战篇
电商底部导航栏的制作 我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个人 ...
- 微信小程序之基础入门
微信小程序有几个基础的文件:js(JavaScript逻辑代码),json(页面配置),wxml(类似hthml布局),wxss(css样式) 我们使用app.json文件来对微信小程序进行全局配置, ...
随机推荐
- 重启Zabbix Server
重启zabbix server:systemctl restart zabbix-server #启动服务 systemctl start zabbix-server systemctl start ...
- 远程桌面连接一台关联无线的电脑(A)时,A电脑无线总是断开导致远程桌面连接失败
1. 我的环境: 两台电脑,分别记为PC1和PC2,PC1有线或者无线连在路由器上,PC2无线连在同一个路由器上.(当然,我的PC1是win10系统,PC2是win7系统) 2. PC1只要一远程连 ...
- 利用uWSGI和nginx进行服务器部署
搭建服务器虚拟环境 1)在本机进入虚拟环境,执行命令导出当前需要的所有包. pip freeze > plist.txt 2)通过ftp软件将项目代码和plist.txt文件上传到服务器. 3) ...
- 关于Numba开源库(Python语法代码加速处理,看过一个例子,速度可提高6倍)
关于Numba你可能不了解的七个方面 https://yq.aliyun.com/articles/222523 Python GPU加速 (很详细,有代码练习)https://blog.csdn.n ...
- 解决“Eclipse中启动Tomcat后,http://localhost:8080/无法访问”的问题
这个问题是eclipse造成的,我们可以修改配置来实现通过eclipse启动tomcat可以访问http://localhost:8080 打开Server试图(打开前不要启动tomcat),双击其中 ...
- 安装window 7系统----计算机经验
上期我们已经成功制作了U盘启动并且也成功进入了PE系统了,在PE微型系统中,除了简单的装系统来恢复C盘,还有什么功能你们可以使用的呢?如果这一期我没有把其他内容讲解的话,千万别乱搞,到时我可能会讲解几 ...
- The host '192.168.174.130' is unreachable. the host may be down..............
The host '192.168.174.130' is unreachable. the host may be down,or there may be a problem with ...
- Python3爬虫 利用百度地图api得到城市经纬度
有2种方式,第一种是利用urllib , 方法1:利用urllib , 先把url 转成urlcode,然后读取网页,读到网页再用json读取内容,比较麻烦. 可以在浏览器输入,看一下格式. http ...
- 阿里巴巴的26款超神Java开源项目,有时间阅读一下各个文档,增添一下知识广度
1.分布式应用服务开发的一站式解决方案 Spring Cloud Alibaba Spring Cloud Alibaba 致力于提供分布式应用服务开发的一站式解决方案.此项目包含开发分布式应用服务的 ...
- P2256 一中校运会之百米跑(map+并查集)
思路:首先处理名字,让字符串直接映射唯一一个数字,这就用map<string, int>即可. 然后,直接用并查集 #include<iostream> #include< ...