前言

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

准备工作

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

点击链接:

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. 我的微信小程序第二篇

    在上一篇<我的微信小程序第一篇(入门)>中,很多人问我什么是微信小程序,在这里我要说一下这个是我的失误啦,我默认大家都知道微信小程序,其实可能行内人士都知道小程序,好多非行内朋友可能平时不 ...

  2. 史诗手册!微信小程序新手自学入门宝典!

    一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...

  3. 【微信小程序】转载:微信小程序实战篇-下拉刷新与加载更多

    下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 当然,你可以直接在全局变量app.json的window里面配置上面这个属性,这样整个项目都允许下 ...

  4. 微信小程序实战篇:商品属性联动选择(案例)

    本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示:   商品属性联动.gif 代码示例 1.commodity.xml <!-- < ...

  5. 微信小程序笔记整理--入门篇。

    7-2 微信小程序入门篇 准备篇 1.登录网址,https://mp.weixin.qq.com 注册一个微信小程序. 2.获取微信小程序appid,登录自己的小程序后台,在开发者设置中获得appid ...

  6. 微信小程序开发之入门篇(熟悉开发工具)

    个人的每一篇博文都谈不上有什么技术含量,只是为了帮助不熟悉微信小程序开发的自己及他人提供一下思路.谢谢,下面开始! PS: 因为本人没有小程序的内测资格,所以所有的开发及Demo都是无AppId的,如 ...

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

    微信小程序创建之后会生成一个项目模板,如下图所示(基本如此,但并不局限于此) 现在分别来说明一下每个文件及目录的意思 app.js 程序的入口文件,必须存在. app.js是小程序的脚本代码.我们可以 ...

  8. 前端微信小程序实战篇

    电商底部导航栏的制作 我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个人 ...

  9. 微信小程序之基础入门

    微信小程序有几个基础的文件:js(JavaScript逻辑代码),json(页面配置),wxml(类似hthml布局),wxss(css样式) 我们使用app.json文件来对微信小程序进行全局配置, ...

随机推荐

  1. 餐饮ERP相关问题FAQ

    1.订单无法自动上传,手动上传也是失败. 检查网络是否有问题,网络如果正常,打开本地连接-属性-internet协议版本4-首选DNS服务器设置为(114.114.114.114) 然后再打开IE浏览 ...

  2. ERP服务启动后无法连接数据库的解决方法

    请安照步骤一步一步走,一个方法一个方法试. 方法一: 第一步,退出ERP 第二步,卸载sql服务,操作方法如下(win+R—输入cmd—输入sc delete mysql_sl 回车键) 第三步,重启 ...

  3. PHP断言(ASSERT)的用法

    简述 编写代码时,我们总是会做出一些假设,断言就是用于在代码中捕捉这些假设,可以将断言看作是异常处理的一种高级形式.程序员断言在程序中的某个特定点该的表达式值为真.如果该表达式为假,就中断操作. 可以 ...

  4. 计算机图形学(第2版 于万波 于硕 编著)第45页的Bresenham算法有错误

    计算机图形学(第2版 于万波 于硕 编著)第45页的Bresenham算法有错误: 书上本来要写的是以x为阶越步长的方法,但是他写的是用一部分y为阶越步长的方法(其实也写的不对),最后以x为阶越步长的 ...

  5. django 下载文件

    方法一. from django.http import StreamingHttpResponse def big_file_download(request): # do something... ...

  6. C和C++头文件大全

    C.传统 C++ #include <assert.h> //设定插入点#include <ctype.h>  //字符处理#include <errno.h>   ...

  7. C#面向对象 类的封装

    class student { public int _code; public int Code//属性 { //获取值 get { ; } //设置值 set { _code = value + ...

  8. SQL Server -- 回忆笔记(一):初见数据库

    SQL Server知识点回忆篇(一):初见数据库 1.  主键 primary key    唯一标识, 不会重复的值才会用来当做主键使用. 表可以没有主键,但建议每张表都有主键. 2.  数据冗余 ...

  9. 为爱好舞蹈的人们做的软件,细究数据结构,操作系统,磁盘原理,用java/c/c++写一个开源 MP3助手

    1.可以给歌曲间插播空白音乐 2.拖拽式调整 3.先排序,后一键写入顺序文件. 国外的开源软件 MP3 播放排序  http://www.murraymoffatt.com/software-prob ...

  10. Apache Curator is a Java/JVM client library for Apache ZooKeeper

    http://curator.apache.org/index.html Welcome to Apache Curator What is Curator? Curator n ˈkyoor͝ˌāt ...