如果你是一个小白，想学习或者了解小程序，但是不知从何下手，那么这篇文章应该会对你有所帮助，如果您是一位大佬，那么这篇文章欢迎您吐槽！

什么是小程序？

小程序是微信新推出来的一种连接用户与服务的方式。是一种不需安装下载就能使用的应用。实现了用完即走的梦想。

小程序的优势

• 不用安装，即开即用，省流量，不占用桌面
• 对于小程序拥有者来说，开发成本更低，他们可以更多财力，人力，精力放在如何运营好产品，做好内容本身，并且相较于原生APP，推广更容易更简单，更省成本。
• 对于用户来说，相较于各种APP，微信小程序UI和操作流程会更统一，降低了使用难度

微信小程序虽然体验上不能和原生APP相媲美，但是综合考虑还是很有优势的。

注册小程序账号

要学习小程序首先要申请小程序账号，根据步骤填写资料就好

这里说一下，注册账号的第三步的时候，也就是信息登记这一步时，主体类型选择个人就好，这里还要登记身份证，有点麻烦。

注册成功以后你就有账号啦，然后来到微信公众平台，查看一下你的APPID，后面会用到
设置-->开发设置

小程序账号注册好了，接下来就是安装微信web开发者工具，点击下一步然后同意协议就好啦

这里建议你们安装一个VSCode，如果直接在微信开发者工具中敲代码的话会非常不方便，你们可以再安装两个插件，会为你们写代码节省很多时间：

安装插件：

现在准备工作都做好啦，接下来是正文了

万达电影

前两天为了去看正义联盟的IMAX版，就在万达电影的APP上弄抽奖，满60减20，可惜我运气太差，让10个人帮我抽都抽不到（想哭），后来刚好要仿一款小程序，就选中了万达电影的小程序。
这是我的github项目地址：仿万达电影小程序，功能还没有完善，但是从中学到了很多关于小程序的相关知识,欢迎star.

1.打开微信开发工具，在微信上确认登录以后，点击小程序项目，

2.项目目录要选择一个空文件夹，APPID就是之前要你记住的APPID,如果没有记住，点击查看APPID，你也可以不填写APPID，选择“可点此体验”也行，但是这样就不能在手机上预览你的项目。项目名称我这里是模仿万达电影小程序，你也可以自己换一个，这里随意。

3.来到微信开发者工具主页，粉色的圈圈里：

• pages里的文件是你需要写的页面
• .js 后缀的表示JS脚本逻辑文件，app.js是指全局的JS文件
• .json 后缀的表示JSON配置文件，app.json是指全局JSON配置文件，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
• .wxss 后缀的表示WXSS样式文件，app.wxss是指全局样式文件

蓝色的圈圈里就是你点击对应的代码了，我们切换到VSCode里继续学习.....

4.打开VSCode编辑器，切换到你的小程序文件，点击app.json
这是默认的数据：

这是我仿万达电影的app.json文件，下面给出了相应的注释：

{// Pages字段 用于描述当前小程序所有页面路径，我目前只有6个页面，你之后写的页面一定要在这里配置路径！！！"pages":["pages/index/index","pages/ticket/ticket","pages/detailedInfo/detailedInfo","pages/cinemas/cinemas","pages/stills/stills","pages/mine/mine"],// window字段 小程序所有页面的顶部背景颜色，文字定义颜色"window":{"backgroundTextStyle":"black","navigationBarBackgroundColor": "white",// 顶部背景颜色"navigationBarTitleText": "万达电影",// 顶部文字"navigationBarTextStyle":"black"// 顶部文字颜色},//tabBar字段 配置小程序导航栏"tabBar":{"color": "rgb(116,122,131)",//tab栏文字颜色"selectedColor": "rgb(217,172,108)",//tab栏文字被选中时的颜色"backgroundColor": "#ffffff",//导航栏背景颜色"borderStyle": "#e0e0e0",//导航栏边框的样式//list字段：选项卡列表，最多可以配置5个"list": [{"pagePath": "pages/index/index",//选中的对应页面的路径"iconPath": "images/movieSelected.png",//tab默认的图标"selectedIconPath": "images/movie.png",//tab选中后的图标"text": "电影"//tab中的文字},{"pagePath": "pages/mine/mine","iconPath": "images/mine.png","selectedIconPath": "images/mineSelected.png","text": "我的"}]}}

这是我的文件夹，图标都放在images文件里，图标可以从iconfont这个网站获取：

效果如下：

5.接下来我们就切一个页面并且传数据,index.wxml页面代码：

<!--小程序中的标签不是div,p,a等标签，而是采用了自定义的view等组件，view就相当于div标签-->
<view class="container"><!--WXML页面中的数据都来自对应Page的data,数据绑定使用{{}}将变量包起来--><!--navigator组件是用于页面跳转的，url就是对应点击之后的页面路径--><navigator class="page__hd" url="../cinemas/cinemas"><!--这里的store就是动态数据，需要去Page中的data中设置--><view class="page__hd_store">当前影院:{{store}}></view><button class="btn">切换</button></navigator><!--在组件上使用wx:for控制属性绑定一个数组，使用数组中各项的数据重复渲染组件。主页的电影信息就是一个个列表默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item，所以在Page页面中只需要设置movies就可以，for循环里的数据都可以用item. 来获取数据--><!--scroll-view是可滚动视图区域，scroll-y="true"表示垂直方向上可滚动，默认为false,如果要设置水平方向上滑动，即scroll-x="true"--><scroll-view class="page__bd" wx:for="{{movies}}" wx:key="{{index}}" scroll-y="true"><view class="movies"><!--这里跳转到页面的页面路径后面加了id={{item.id}},因为每部电影的电影详情都不一样，所以我需要设置一个id来筛选我点击跳转的页面所需要的数据,item.id也是数组中的一项，不需要另外去Page中设置--><navigator url="../detailedInfo/detailedInfo?id={{item.id}}"><view class="item"><view class="movie__hd"><image class="movie" src="{{item.image}}" /></view><view class="movie__bd"><text class="movie__bd_name">{{item.movieName}}</text><text class="movie__bd_jd">IMAX3D</text><text class="movie__bd_introduction">{{item.introduction}}</text><text class="movie__bd_actor">{{item.actor}}</text></view></view></navigator><view class="movie__ft"><text class="movie__ft_score">{{item.score}}</text><navigator url="../ticket/ticket"><button class="btn big">购票</button></navigator></view></view></scroll-view>
</view>

我的数据是用Easy Mock写的，这是我目前写的数据：电影信息，你们可以直接使用。index.js页面代码：

const app = getApp()Page({data: {//动态数据movies: [],store: ""},//onLoad函数表示页面加载完成后执行onLoad: function(res) {console.log(res.data);var that = this;//wx.showToast是显示消息提示框，wx.showToast({title: "加载中...",//提示框中的文字内容icon: "loading",//提示框中的图标，只能有两个值，"success"和"loading"duration: 500//表示提示框在页面中显示的时间，单位是毫秒});//wx.request是小程序的API，所有以wx. 为前缀的都是API，//wx.request是用于请求数据的wx.request({//url内就是数据来源url: 'https://www.easy-mock.com/mock/5a20be8ebe1c8248fef10573/getMoviesInfo/getInfo',//success函数表示，当请求数据成功时执行success函数,res是一个形参，即表示请求的数据success: function(res){//当你不知道数据的结构层是怎样的时候，可以console.log一下查看数据console.log(res.data.data);//this.setData是设置Page中data的数据,//这里是使用that.setData，因为函数中嵌套函数this的指向会发生改变，所以在外层函数中使this指向了that.that.setData({movies: res.data.data.movieDetails})}})},//页面显示完成后执行onShow函数（每次打开页面都会调用一次），//onShow函数是在onLoad函数执行之后再执行的，这里涉及到小程序的生命周期函数。onShow: function() {var that = this;//wx.getStorage是从本地缓存中异步获取指定key对应的内容，这里对应的是我cinemas页面的内容，获取指定的电影院名称wx.getStorage({key: "cinema",//key中的内容就是我需要的内容success: function(res) {console.log(res);that.setData({store: res.data})}})}
})

页面效果：

我的项目地址：github地址,欢迎fock,欢迎star.
到这里差不多就结束了，最后再给几个日后很有用的链接：

• 小程序开发文档
• Easy Mock虚拟数据接口
• iconfont图标库
• 野狗（实时通信云,实时数据同步功能）

如果对于代码有什么问题，欢迎一起讨论学习。
在截图里好像有我在听的歌，我的网易云账号：nzhing，互粉啊，哈哈哈

我从不信命运，不信所谓的可以指引我们的生命征兆。我不相信算命师讲的故事，不相信可以预知未来的扑克牌。我只相信简单的巧合，还有偶然的真相 ————伊斯坦布尔假期