前言

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

准备工作

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

点击链接:

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. aspectj 简单的模拟权限检查、事务、日志记录

    package com.ij34.service; public class Hello { public void he() { System.out.println("执行Hello的h ...

  2. Android内嵌VLC实现播放网络视频,网络音频

    1.在对应模块的build.gradle文件中,添加依赖 //VlC implementation "de.mrmaffen:vlc-android-sdk:2.0.6" 2.布局 ...

  3. vscode中配置php的xdebug

    vscode中配置php的xdebug vscode配置php的xdebug,步骤如下: 1. 安装phpdebug插件: PHP Debug 2.网上下载php的xdebug扩展(注意根据自己的ph ...

  4. AOP的底层实现:JDK动态代理与Cglib动态代理

    转载自 https://www.cnblogs.com/ltfxy/p/9872870.html SpringAOP底层的实现原理: JDK动态代理:只能对实现了接口的类产生代理.(实现接口默认JDK ...

  5. Announcing the Updated NGINX and NGINX Plus Plug‑In for New Relic (Version 2)

    In March, 2013 we released the first version of the “nginx web server” plug‑in for New Relic monitor ...

  6. vue中父组件调用子组件函数

    用法: 子组件上定义ref="refName",  父组件的方法中用 this.$refs.refName.method 去调用子组件方法 详解: 父组件里面调用子组件的函数,父组 ...

  7. 「APIO2017」商旅

    「APIO2017」商旅 题目描述 在广阔的澳大利亚内陆地区长途跋涉后,你孤身一人带着一个背包来到了科巴.你被这个城市发达而美丽的市场所深深吸引,决定定居于此,做一个商人.科巴有 \(N\) 个集市, ...

  8. Python实现矿池

    自建P2POOL矿池详细教程(高级篇)http://8btc.com/article-1804-1.html p2pool比特币矿池教程综合篇(包含linux矿池教程)https://www.cybt ...

  9. 重新安装liteide后无法关联.go文件的解决办法(及更改liteide配色方案)

    现象:双击.go文件,从打开方式中选择新安装的liteide.exe无效. 解决办法: 打开regedit 找到HKCU\Software\Classes\go_auto_file 发现下面有shel ...

  10. UVA10410-Tree Reconstruction(BFS序和DFS序的性质)

    Problem UVA10410-Tree Reconstruction Accept:708  Submit:4330 Time Limit: 3000 mSec Problem Descripti ...