目录

1. 什么是微信小程序？ 1. 简介

微信小程序是小程序的一种，是一款无需下载安装即可使用的应用程序，实现了“应用触手可及”的梦想，用户可以通过扫一扫或搜索打开应用。

2. 功能

微信小程序是一款无需下载安装即可使用的应用，实现了“触手可及的应用”的梦想，用户只需扫一扫或搜索即可打开应用，也体现了“用了就走”的理念，用户不必为是否安装过多的应用而烦恼，应用将无处不在、随时可用，却无需安装或卸载。对于开发者来说，开发微信小程序的门槛相对较低，难度没有APP那么高，可以满足简单的基础应用，适合生活服务的线下店铺和非刚性低频应用的转化。微信小程序可实现消息通知、离线扫一扫、公众号关联等七大功能，其中通过公众号关联，用户可以在公众号和微信小程序之间跳转，因为微信小程序没有入口。

二、开发前准备1、申请账号

进入小程序注册页面，按照提示填写信息并提交相应材料，即可拥有自己的小程序账号。在这个小程序管理平台中，你可以管理小程序的权限、查看数据报表、发布小程序等操作。登录小程序后台，我们可以在菜单“开发”-“开发设置”中看到小程序。微信小程序注册

2. 安装开发者工具

进入开发者工具下载页面，根据您的操作系统下载对应的安装包进行安装。关于开发者工具更详细的介绍，请参见“开发者工具介绍”。

3. 创建项目 1. 创建项目

在新建项目中选择小程序项目，选择代码存放的硬盘路径，填写你刚刚申请的小程序名称，给你的项目起一个好听的名字，勾选“不使用云服务”（注意：创建项目必须选择一个空目录），点击新建，你就会得到你的第一个小程序。

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

开发者工具就像是一个编辑器和浏览器的结合体，兼具两者的功能，左侧是预览，右侧是编辑和查看。

2. 项目目录

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

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

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

3. 允许上传的文件

在项目目录中，以下文件会被编译，因此上传后无法直接访问：.js、app.json、.wxml、*.wxss（wxml、wxss 文件仅供在 app.json 中配置的页面使用）。另外，只有后缀在白名单中的文件才可以上传，不在白名单中的文件可以在开发工具中访问，但无法上传。具体白名单如下：

哇喔

png

图片

JPEG格式

动态图

SVG

json

证书

mp3

音频

m4a

mp4

音频

奥格

丝绸

四、项目配置1、全局配置

小程序根目录下的app.json文件用于对微信小程序进行全局配置，确定页面文件的路径、窗口表现、设置网络超时、设置多个标签页等。下面是包含一些常用配置选项的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中相同的配置项，下面是一个包含一些常用配置项的json：

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

5. 发展

微信小程序开发是基于js的，部分方法和说明和vue类似

1.标签

微信小程序中一些常用的标签都封装成了功能齐全的组件，但比较常用的标签有两个

看法

相当于 div

　<view> </view>

文本

相当于跨度

　<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.来完成数据刷新。

this.setData({ signList: dataList, })

3. 使用说明

事件绑定

在微信小程序中，事件都是以bind开头的。

<view bindtap="chooseItem">

如果判断

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>

总结

小程序不是三言两语就能解释清楚的，以上只是对小程序的简单介绍。