微信小程序开发入门

---

一、微信小程序是什么？

1.简介

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

2.功能

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，微信小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。微信小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中，通过公众号关联，用户可以实现公众号与微信小程序之间相互跳转。由于微信小程序不存在入口。

二、开发前的准备

1.申请账号

进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。登录 小程序后台 ，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。微信小程序注册

2.安装开发者工具

前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

三、创建项目

1.创建项目

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 “不使用云服务” （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了。

点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

开发者工具就像是编辑器和浏览器的集合，同时兼具两者的功能，左边是预览，右边是编辑和检查。

2.项目目录

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，

一个小程序页面由四个文件组成，分别是：

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

3.允许上传的文件

在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：

wxs
png
jpg
jpeg
gif
svg
json
cer
mp3
aac
m4a
mp4
wav
ogg
silk

四、项目配置

1.全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。以下是一个包含了部分常用配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

2.页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。以下是一个包含了部分常用配置选项的 json ：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

五、开发

微信小程序的开发是基于js的，一些方法和指令与vue相似

1.标签

在微信小程序中常见的一些标签都被封装成组件具有完善的功能，但是有两种常用标签
view
相当于div

　<view> </view>

text
相当于span

　<text> </text>

2.语法

变量使用
在微信小程序中变量是通过双花括号使用的

　<view >  {{ 变量 }}</view>

方法使用
在微信小程序中方法是不可传参的，我们需要将数据挂载在标签上在js中获取

数据挂载
<view class='showList '  bindtop='shopPost'   data-shopId='item.goods_id' ></view>  
注意必须是以data-开头
js取值
shopPost:function(event){   var postId = event.currentTarget.dataset.shopid }

数据刷新
在微信小程序中数据并不是双向绑定的所以我们需要通过this.setData来完成数据刷新

this.setData({
  signList: dataList,
})

3.指令

事件绑定
在微信小程序中事件是bind开头的

<view bindtap="chooseItem">

if判断

wx:if="{{item.id && item.lessNum != 0}}"

for循环

<block wx:for="{{listRepar}}" wx:key="unique" wx:for-index="i" wx:for-item="item">
　　<view class='tabBox active' bindtap="chooseItem">
　　　　<view class='nameWei'><image class='nameWeiPic' src="../../images/pp.png" />               {{item.repair_type}}</view>
　　　　<view class='nameWord'>{{item.repair_type}}</view>
　　</view>
</block>

总结

小程序并不是三言两语就可以讲清的以上只是对小程序进行了简单的介绍，具体请参考 官方文档