一.注册小程序账号，下载IDE

1.官网注册https://mp.weixin.qq.com/，并下载IDE。

2.官方文档一向都是最好的学习资料。

注意：

（1）注册账号之后会有一个appid，新建项目的时候需要填上，不然很多功能是用不了的，比如不能预览，不能上传代码等等。

（2）如果你注册过微信公众号的话，一定要注意，微信公众号和小程序是两个账号，二者的appid也是不同，小程序开发必须使用小程序的appid哦。

二.小程序框架介绍和运行机制

1.我们建立了“普通快速启动模板”，然后整个项目目录如下：

2.app.js

整个项目的启动文件，如注释写的onlaunch方法有三大功能，浏览器缓存进行存和取数据；用登陆成功的回调；获取用户信息。

globalData是定义整个项目的全局变量或者常量哦。

3.app.json

整个项目的配置文件，比如注册页面，配置tab页，设置整个项目的样式，页面标题等等；

！注意：小程序启动默认的第一个页面，就是app.json的pages中的第一个页面哦。

4.pages

小程序的页面组件，有几个页面就会有几个子文件夹。比如快速启动模板，就有两个页面，index和logs

5.打开index目录

可以看到有三个文件，其实和我们web开发的文件是一一对应的。

index.wxml对应index.html；

index.wxss对应index.css；

index.js就是js文件哦。

一般我们还会给每个页面组件添加一个.json文件，作为该页面组件的配置文件，设置页面标题等功能

6.双击index.js文件

（1）var app = getApp();

引入整个项目的app.js文件，用来取期中的公共变量等信息。

如果要使用util.js工具库中的某个方法，在util.js中module.exports导出，然后在需要的页面中require即可得到哦。

（2）比如，我们要获取豆瓣电影的时候，我们需要调用豆瓣的api；我们先在app.js中的gloabData中定义doubanBase

然后在index.js中使用app.globaData.doubanBase即可取到这个值。

当然这些常量你也可以在页面需要的时候，再用写死的值，但是为了整个项目的维护，还是建议把这种公用参数统一写在配置文件中哦。

（3）接下来在整个page({})中，第一个data，就是本页面组件的内部数据，会渲染到该页面的wxml文件中，类似于vue、react哦~

通过setData修改data数据，驱动页面渲染

（4）一些生命周期函数

比如onload()， onready(), onshow(), onhide()等等，监听页面加载、页面初次渲染、页面显示、页面隐藏等等

更多的可以查官网API哦。其中用的最多的就是onload()方法，和onShareAppMessage()方法（设置页面分享的信息）

7 .wxml模板的使用。

比如本项目电影页面，就是以最小的星级评价组件wxml当做模板，star到movie到movie-list，一级一级的嵌套使用。

star-template.wxml页面写好name属性；然后import引入的时候通过name获得即可

8.常用的wxml标签

view，text，icon，swiper，block，scroll-view等等，这些标签直接查官网文档即可

三.小程序框架、各个页面以及发布上线的注意点

1.整个框架中的一些注意点

（1）整个wxml页面，最底层的标签是<page></page>哦。

（2）每个页面顶部导航栏的颜色，title在本页面的json中配置，如果没有配置的话，取app.json中的总配置哦。

（3）json中不能写注释哦，不然会报错的。

（4）路由相关

1）使用wx.SwitchTab跳转tab页的话，在app.json中除了注册pages页面，还需要在tabBar中注册tab页，才能生效哦。

注意：tab最多5个，也就是我们说的头部或者底部最多5个菜单。其他的页面只能通过其他路由方法打开哦。

2）navigateTo是跳到某个非tab页，比如欢迎页，电影详情页，城市选择页；在app.json中注册后，不能在tabBar里注册哦，不然同样也是不能跳转的哦。

3）reLaunch跳转，新开的页面左上角是没有退回按钮的，本项目只用了一次，切换城市的时候哦。

（5）页面之间传递参数

参数写在跳转的url之中，然后另一个页面在onload方法中的传参option接收到。如下传递和获取id

（6）data-开头的自定义属性的使用

比如wxml中我们怎么写

点击的事件对象可以这么取，var postId = event.currentTarget.dataset.postid;

注意：大写会转换成小写，带_符号会转成驼峰形式

（7）事件对象event，event.target和event.currentTarget的区别：

target指的是当前点击的组件和currentTarget 指的是事件捕获的组件。

比如，轮播图组件，点击事件应该要绑定到swiper上，这样才能监控任意一张图片是否被点击，

这时target这里指的是image（因为点击的是图片），而currentTarget指的是swiper（因为绑定点击事件在swiper上）

（8）使用免费的网络接口：

本项目中用到了和风天气api，腾讯地图api，百度地图api，豆瓣电影api，聚合头条新闻api等，具体用法可以看各自官网的接口文档哦，很详细的

注意：免费接口是有访问限制的，所以如果用别人的组件用了这种接口的话，最好还是自己注册一个新的key替换上哦

附上一个免费接口大全：

https://github.com/jokermonn/-Api

！！另外还要注意，要把这些接口的域名配置到小程序的合法域名中，不然也是访问不了的

注意：wxss有一个坑：无法读取本地资源，比如背景图片用本地就会报错哦。

把本地图片弄成网络图片的几种方式：上传到个人网站；QQ空间相册等等也是可以的哦

四、推荐几个小程序开发的资料

（1）知乎一篇小程序的资料：

https://www.zhihu.com/question/50907897

（2）小程序社区

http://www.wxapp-union.com/portal.php

（3）极乐小程序商店

http://store.dreawer.com/

微信小程序基础（一）相关推荐

更改微信小程序的基础版本库；更改uni-app小程序基础库；更改用户的微信小程序基础库最低版本；设置用户的微信小程序版本库；
需求场景:微信小程序不少API都有最低版本支持,为了避免不必要的麻烦,我们可以根据需要给小程序设置基础库最低版本,这样若用户使用的基础库版本低于设置的最低版本要求,则无法正常使用小程序,并提示更新微信 ...
《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
微信小程序基础（全家福01）
微信小程序基础目标能够知道如何创建小程序项目能够清除小程序项目的基本组成结构能够知道小程序页面有几个部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行协同开发和发布讲解目录 ...
微信小程序基础库的问题
微信小程序基础库的问题很多刚开始开发小程序的开发者经常会遇到在开发者工具的模拟器里面可以正常使用小程序的某个API,但是在预览(真机测试)时打开调试发现使用的API报错,但是开发工具里面的基础库是支 ...
微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
微信小程序基础语法
微信小程序基础语法官网:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ .wxml文件中列表渲染 <view ...
微信小程序基础学习笔记Day02
学习目标:微信小程序基础Day02 今日目标: 能够使用 WXML 模板语法渲染页面结构能够使用 WXSS 样式美化页面结构能够使用 app.json 对小程序进行全局性配置能够使用 page. ...
视频教程-2020最新微信小程序基础+实战精讲视频-微信开发
2020最新微信小程序基础+实战精讲视频负责过多个软件项目的研发.设计和管理工作,拥有项目管理师认证.项目监理师中级认证.出版过的图书有<微信小程序开发图解案例教程><Axure ...
小程序用户头像昵称获取规则调整公告及微信小程序基础库的问题
更新时间:2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访问,小程序通过 wx.getUserProfile 接口将正常返回用户头 ...
小程序学习 - 01小程序简介+微信小程序基础
小程序简介小程序是一个全新的.轻量级的移动端应用. 起源在小程序出现之前的移动端开发的解决方案有: Android iOS Windows Phone - 后来退出历史舞台移动端开发发展了一段时 ...

微信小程序基础（一）