前言

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

准备工作

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

点击链接:

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. IntelliJ IDEA 导入Spring源码

    第一步: 使用git 拉取代码 git 命令: git init    //创建git仓库 git clone  https://github.com/spring-projects/spring-f ...

  2. sq

    CREATE TABLE `message` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `username` varchar(20) DEFAULT NUL ...

  3. Win7 下安装ubuntu14.04双系统

    下面介绍一下利用wubi在Windows中安装Ubuntu 14.04的教程,或者说安装方法和注意事项.  方法一:直接下载wubi.exe 方法二:直接下载ubuntu-14.04-desktop- ...

  4. 6.02-news_re

    import re import requests url = 'http://news.baidu.com/' headers = { "User-Agent": 'Mozill ...

  5. Python3爬虫 利用百度地图api得到城市经纬度

    有2种方式,第一种是利用urllib , 方法1:利用urllib , 先把url 转成urlcode,然后读取网页,读到网页再用json读取内容,比较麻烦. 可以在浏览器输入,看一下格式. http ...

  6. I/O 机制的介绍(Linux 中直接 I/O 机制的介绍)

    IO连接的建立方式 1.缓存IO.流式IO: 2.映射IO.块式IO: 3.直接IO. IO的方式: 同步.异步.定时刷新: MMAP与内核空间 mmap使用共享用户空间与内核空间实现: 直接 I/O ...

  7. Qt编译错误GL/gl.h: No such file or directory

          近期把系统换成ubuntu14.04的了.在安装Qt后,我执行了里面的一个演示样例,发现编译有错: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

  8. 解决 双显卡 y7000笔记本 (Dual Graphics) Ubuntu 18.04 GDM3 无法外接显示器

    sudo gedit /lib/systemd/system/gdm3.service 把其中的 ExecStartPre=/usr/share/gdm/generate-config 更改为 Exe ...

  9. @ModelAttribute

    在执行Controller方法前都会新建一个Map对象称为隐含模型,该Map对象是共享的,如果一个方法的入参为Map ModelAndMap ModelMap等类型,那么会把隐含模型当做入参赋给方法. ...

  10. 007_Mac上安装Node和NPM

    一.推荐brew来对node和npm版本进行管理. <1>确保brew是安全可靠的,代码如下: $ brew doctor #直接install node会有以下报错https://git ...