微信小程序安装与开发步骤

1.登陆：微信专有开发工具安装地址
如图：我选择的是稳定版，64位
安装完成后如图：

图 2 .

2.新建第一个小程序
2.1 申请 AppID
登陆https://mp.weixin.qq.com 点击"立即注册"

注册成功后，可以在开发–>开发管理–>开发设置中就可以显示小程序的AppID.

2…2新建小程序
安装完开发工具，AppID申请成功后，打开微信Web开发工具。注意：记得微信扫码登陆。

2.3点击+ 创建小程序
开发模式选小程序，不适用云服务，语言javascript。

2.4 小程序的文件格式：
1.js 后缀的文件为页面脚本文件，用于实现页面的业务逻辑；
2.json 后缀的文件为配置文件，用于设置小程序的配置效果，主要以json数据存放。
3.wxss后缀的文件为样式表文件，用于对小程序用户界面的美化设计。
4.wxml后缀的文件为页面结构文件，用于在页面上增加视图和组建等来构建页面。

下面先了解一下文件目录：
page :目录主要用于存放小程序的页面文件，其中wxml文件和js文件是必须的。为了方便开发者减少配置项，文件名称必须与页面的文件夹名称相同。如图：index文件夹名下只能是index

util 目录
util 存放全局的js文件，目录名可由开发者根据需求自定义。如图创建小程序时自动生成的util.js 如下：

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
}const formatNumber = n => {n = n.toString()return n[1] ? n : `0${n}`
}module.exports = {formatTime
}

对于允许外部调用的方法，需要用module.exports声明后能在其他的js文件中通过以下代码引用：

var  util=require('../../utils/util.js);//在需要使用的js文件中导入js
page({data:{time:util.formatTime(new Date()) //调入函数时，传入new Date() 参数
},
onLoad: function(){var time=util.formatTime(new Date());thid.setData(time:time);
}
})

下面介绍：小程序根目录下的文件
一个小程序的主体部分由3个文件组成，必须存放在项目的根目录下。每个文件的名称和功能都是特定的，具体如下：
（1） app.js : 该文件是小程序项目的启动入口文件，处理小程序生命周期中的一些方法，文件内容不能为空。
（2） app.json: 该文件是小程序的全局配置文件，用于设置导航条的颜色，字体大小，tabBar等。文件内容不能为空。
（3）app.wxss: 该文件是小程序的公共样式文件，用于全局美化设计界面。文件能容可以为空。

详解1. app.js 中的函数使用。

原始代码

// app.js
App({onLaunch() {// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})},globalData: {userInfo: null}
})

文件中的app（{object}）函数用于注册一个小程序，object参数及功能说明：

onLaunch :生命周期函数–监听小程序初始化，打开小程序时调用一次。
onShow :生命周期函数—监听小程序显示，在小程序启动或者从后台进入前台显示时调用。
onHide :生命周期函数–监听小程序隐藏，在小程序从前台进入后台时调用。
onError ：错误监听函数，在小程序js脚本错误或者API调用失败时调用。
onPageNotFound: 页面不存在监听函数，在小程序要代开打开的页面不存在时调用。
其他：类型–Any —可以是自定义的函数或者数据，用this 可以访问。

小程序的生命周期如图：

2.6 详解2 app.json
app.josn 是文件用于对小程序进行全局配置。例如：配置小程序的页面文件路径、窗口显示特性、顶部导航条、多tab标签及网络超时时间等。
app.json常用配置项及功能说明如下：
配置项类型必填功能
pages:String Array 是设置页面文件路径
window：Object 否设置默认页面窗口显示特性
tabBar :Object 否设置多tab标签样式
networkTimeout: Object 否设置网络超时时间
debug :Bolean 否设置是否开启debug模式

pages : 类型是字符串数组，它的每一项都是字符串（用路径名/文件名格式表示，文件名不需要后缀），用来指定小程序由哪些页面组成。
如：
{ “pages”:[
"pages/index/index",
“pages/logs/logs”
]
}
注意：pages 配置项的第一项制定的页面是小程序的初始页面（即：首页），在pages 中新增页面或者减少页面，都需要在pages配置项中进行相应的编辑修改。如：
{
“pages”:[
“pages/index/index”,
“pages/news/news”,
“pages/help/help”,
“pages/logs/logs”
]}
如果添加的页面不存在，经过编译保存后，集成开发环境会自动生成页面存放的目录和相应的js、wxml 、json 、wxss文件。如图：

详解 2.1 配置项 window
window 配置项的是Object,用来设置小程序顶部导航条（背景色、标题文字等），窗体标题和背景色等。window配置项的常用属性和功能说明如下：

配置项类型功能
navigationBarBackgroundColor: HexColor --设置导航条背景色，默认值：#000000（十六进制颜色类型）；
navigationBarTextStyle :string --设置导航条标题颜色，仅支持white/black,默认值为white
navigationBarTitleText:Object --设置导航条标题文字内容
backgroundColor： HexColor --设置窗体下拉刷新或者上拉加载时露出的背景色，默认值为#ffffff，需要将enablePullDownRefresh属性值设置为true。
enablePullDownRefresh :Boolean --设置是否开启当前页面的下拉刷新，默认值为false。
backgroundTextStyle :String --设置窗体下拉loading 的样式，仅支持dark/light,默认值为dark，需要将enablePullDownRefresh 属性值设置为true。
下面简单写一个：

{ “pages”:[
“pages/index/index”,
“pages/logs/logs”
],
“window”:{
“navigationBarBackgroundColor”: “#E7B639”,
“navigationBarTitleText”: “导航条文字”,
“navigationBarTextStyle”: “black”,
“backgroundColor”: “#00ff00”,
“backgroundTextStyle”: “dark”,
“enablePullDownRefersh”:true
},
“style”: “v2”,
“sitemapLocation”: “sitemap.json”
}
效果：
He
app.json 中的配置项 2.2 tarBar 配置项
tabBar配置项的类型是 Object ，用来设置小程序tab 标签的显示样式、tab 切换时的对应页面。tabBar配置项常用属性和功能说明如下：
配置项类型功能
color ：HexColor --设置tab上文字的颜色。
selectedColor：HexColor --设置tab上文字选中时的颜色。
backgroudColor:HexColor --设置tab的背景色。
borderStyle: String --设置tabBar 上边框的颜色，仅支持black/white,默认是black.list :Array – 设置tabBar上tab的列表数组，该数组元素最少2个，最多5个，详细下面再讲。
position：String —设置tabBar的位置i，仅支持bottom (底部)/top(顶部)，默认是bottom。

上面的list常用属性及功能说明如下：
属性类型功能
pagePath :String --设置tab对应的页面路径，该页面路径必须在pages中先定义。
text ：String–设置tab上的文字。
iconPath :String --设置tab上的图片路径，不支持网络图片，当position 为top时，tab上不显示图片，图片大小<=40kb,尺寸建议为81px X81px.
selecctedIconPath: String --设置tab选中时显示de图片路径，其他同iconPath.

下面来试一下 tarBar 配置项效果。
代码如下：

{ “pages”:[
“pages/wx/wx”,
“pages/txl/txl”,
“pages/find/find”,
“pages/me/me”
],
“window”:{
“navigationBarBackgroundColor”: “#E7B639”,
“navigationBarTitleText”: “导航条文字”,
“navigationBarTextStyle”: “black”,
“backgroundColor”: “#00ff00”,
“backgroundTextStyle”: “dark”,
“enablePullDownRefersh”:true
},
“tabBar”: {
“color”: “#000000”,
“selectedColor”: “#11cd6e”,
“list”: [
{
“pagePath”: “pages/wx/wx”,
“text”: “微信”,
“iconPath”: “images/wxall.png”,
“selectedIconPath”: “images/bwxall.png”
},{
“pagePath”: “pages/txl/txl”,
“text”: “通讯录”,
“iconPath”: “images/wxmsg.png”,
“selectedIconPath”: “images/bwxmsg.png”
},{
“pagePath”: “pages/find/find”,
“text”: “发现”,
“iconPath”: “images/wxfind.png”,
“selectedIconPath”: “images/bwxfind.png”
},{
“pagePath”: “pages/me/me”,
“text”: “wo”,
“iconPath”: “images/wxset.png”,
“selectedIconPath”: “images/bwxset.png”

}
]

“style”: “v2”,
“sitemapLocation”: “sitemap.json”
}

ctrl+s 保存并编译或者ctrl+b编译
效果如图：

若中途遇到报错：pages/index/index has not been declared in app.json.
在上图的最右侧 “详情”-“本地设置” --选中最新的基础库即可。
2.3 app.json中的networktimeout配置项。
networktimeout 配置项的类型是 Object ，用来设置小程序网络请求超时时间，单位为ms，需要配合各个网络请求使用。networkTimeout 配置项的常用属性及功能说明如下表：
配置项类型功能
request Number --设置普通https 请求（wx.request）的超时时间，默认为 60000ms
connectSocket ：Number–设置WebSocket 通信（wx.connectSocket）的超时时间，默认值为60000ms
uploadFile :Number–设置上传文件（wx.uploadFile）的超时时间，默认为 60000ms.
downloadFile :Number --设置下载文件（wx.downloadFile）的超时时间，默认值为 60000ms.

举例：设置https和下载文件超时时间为10秒，可以在app.json文件中使用以下代码：

“networkTimeout”: {
“request”: 10000,
“downloadFile”: 10000

}
2.4 app.json 中的配置项 debug
debug 配置项的类型是Boolean ，用来在开发者工具中开启debug模式（默认：false，表示不开启）。在开发者工具的控制台面板，调试信息以info的形式列出，信息包含Page的注册、页面路由、数据更新及事件触发等，这些信心可以帮助开发者快速定位一些常见的问题。
如图:

小结：以上是 app.json中的配置项及功能说明演示。下面来介绍一下app.wxss.

首先可以这样理解一下： wxss(类似于 css)、wxml(类似于html).

app.wxss 文件是整个小程序的公共样式，在该文件中定义的样式恶意在这个小程序的所有页面使用。在实际应用开发时，用于定义小程序页面的样式文件，其有俩种样式：
1.全局样式：定义app.wxss中的样式为全局样式，可以用于小程序的每一个页面。
2.局部样式：在pages文件夹中的wxss文件中定义的样式为局部样式，只作用于对应的页面。在局部样式文件中定义的样式选择器，如果与app.wxss文件中定义的样式选择器同名，则会覆盖app.wxss文件中定义的样式选择器。（也就是说：局部有配置的话会覆盖公共配置的样式【pages中的wxss为局部样式】）

下面讲解一下小程序的页面描述文件。
web前端页面：HTML+CSS+JavaScript

小程序：wxml(页面结构文件=html)+wxss(页面样式文件=css)+js(页面逻辑文件)+json（页面配置文件）

wxml:(类似html)，他可以结合基础组件、事件系统构建出页面的结构。可以由视图容器类组件、基础内容类组件、表单类组件、导航类组件、多媒体组件、地图类组件、画布类的组件的标签和属性构成。
同时 wxml具有数据绑定、列表渲染、条件渲染、模板及事件绑定等功能。
例如：系统自带的logs.wxml中

<!--logs.wxml-->
<view class="container log-list"><block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log"><text class="log-item">{{index + 1}}. {{log.date}}</text></block>
</view>

上述代码使用view组件来控制展示页面内容，通过block组件、text组件实现页面数据的绑定和列表渲染。
细讲3 .wxss
3.1 数据绑定:
页面机构文件wxml中显示的内容可以是静态也可以是动态。wxml中的动态数据均来自页面逻辑文件js中的page的data对象。
（1）作用于页面内容
举例：
wx.wxml 中

<!--pages/wx/wx.wxml-->
<view>欢迎 <text>微信</text></view>
<view>欢迎<text>{{name}}</text></view>
<text>pages/wx/wx.wxml</text>

对应的wx.js文件中

Page({/*** 页面的初始数据*/data: {name:"大哥"},

这样只要js中的name变量值改变页面内容文件wx.wxml中的name显示的内容就会随之改变。这样就成了动态。
效果图：

（2）作用于组件属性。
wxml页面结构文件中定义组件时，一般需要通过设定组件属性来定义组件在页面上呈现的效果。
wx.wxml

<!--pages/wx/wx.wxml-->
<view style="background:{{col}}" >欢迎 <text>微信</text></view>
<view class="bcolor{{id}}">欢迎<text>{{name}}</text></view>

wx.js

 data: {name:"大哥",col:"green",id:2},

wx.wxss

.bcolor1{background: red;
}
.bcolor2{background: yellow;
}

效果如图，若将id:2改为id:1 则会显示红色这就相当作用于组件属性。
（3）作用于控制组件
在页面显示时，我们可以设置条件，当满足条件时页面结构文件中(wxml)定义的组件才会被现实出来，否则将会被隐藏。例如：
wx.wxml

<view wx:if='{{flag}}'>{{flag}}</view>

wx.js

 data: {name:"大哥",col:"green",id:2,flag:true},

将上面的wx.js中的flag:false则《view》组件不会显示。

(4) 进行简单的运算。
在页面建构文件中使用数据绑定进行运算主要包括以下几种方式：
1.三元运算
前面我们使用了wx:if 条件渲染实现了控制组件的显示或者隐藏，在wxml中还可以使用hidden属性控制组件的显示或者隐藏。代码如下：
wx.wxml

<view hidden="{{flag ? true:false}}">hidden</view>

wx.js中的 flag:true 则不显示hidden ,false则显示。
2.逻辑运算
数据绑定除了运用三元运算还可以运用普通的逻辑运算。
wx.wxml

<view wx:if="{{length>5}}">length大于5</view>

wx.js

 length:6

3.算数运算和字符串运算
wx.wxml

<view >{{a-b}}+{{c}}+{{d}}</view>
<view >{{"hello,"+name}}</view>

wx.js

   a:1,b:2,c:3,d:4

效果如图：

4.数据路径运算。
为了实现对复杂数据类型的引用，数据绑定形式可以进行数据路径运算。上代码：
wx.wxml

<view>{{person.id}},{{person.name}},{{person.dept[0]}}系</view>

wx.js

person:{id:'007',name:'曾公子',dept:['计算机','数学']}

效果如图：

3.2 列表渲染
页面结构文件中显示的内容可以在页面逻辑文件js中定义普通的变量，也可以是数组。但是如果页面上显示的数据内容来源于数组，用简单的数据绑定方法不仅会出现冗余代码，而且比较繁琐。
小程序中提供了列表渲染功能可以将数组列表中各项内容进行重复渲染，大大提高开发效率。
列表渲染：使用的场景大多为商品展现、购物车和内容收藏等需要重复显示数据内容的页面。这类需要重复显示的数据往往保存在小程序的数组列表中，这种数组列表的展示其实就是用for 循环来循环生成相对应的列表项布局，即：wx:for 用for循环重复渲染组件实现此项功能。举例：
txl.wxml

<view wx:for="{{shopName}}">{{index}}:{{item}}</view>

txl.js

data: {shopName:['衣服','毛巾','手套','裤子']},

效果：

另外，使用wx:for-item可以指定数组当前元素的变量名，使用wx:for-index 可以指定数组当前元素下标的变量。前面商品列表页面的结构文件可以修改为如何代码：

<view wx:for="{{shopName}}">{{index}}:{{item}}</view>
<view wx:for="{{shopName}}" wx:for-index="itemIndex" wx:for-item="itemName">
{{itemIndex}} :{{itemName}}</view>

在实际应用开发中，wx：for 要么配合view使用，要么配合block使用，这俩种使用方式的区别在于配合block使用时block不会被渲染，而配合view使用时则会多渲染一次，但是最终呈现效果是一样的。例如，在下图电话列表显示效果。
txl.wxml

<block wx:for="{{infoList}}" wx:for-index="telIndex" wx:for-item="telItem" wx:key="phone"><view><view style="background:yellow" >{{ telIndex }}</view><view>电话:{{telItem.phone}}</view><view>用途:{{telItem.name}}</view></view>
</block>

txl.js

 shopName:['衣服','毛巾','手套','裤子'],infoList:[{phone:110,name:"报警电话"},{phone:119,name:"火警电话",},{phone:120,name:"急救电话"}]

效果如图：

上面你有没有发现一个新鲜的玩意：wx:key 控制属性 ，官方文档的解释是：如果数组列表中项目的位置会动态改变或者有新的项目添加到项目中，并希望列表中的项目保持自身的特征和状态，就需要使用wx:key 来指定列表中项目的唯一标识。
微信开发文档：https://developers.weixin.qq.com

3.3条件渲染
wx:if 在小程序中用来条件渲染，即：控制是否需要渲染代码指定的组件，它的的功能与Java、C等高级语言中的if的条件判断一样，还可以与wx:elif、wx:else等配合使用。举例：
me.wxml

<view wx:if="{{week==1}}">星期{{week}}：吃饺子</view>
<view wx:elif="{{week==2}}">星期{{week}}：吃米饭</view>
<view wx:elif="{{week==3}}">星期{{week}}：吃馒头</view>
<view wx:elif="{{week==4}}">星期{{week}}:吃面条</view>
<view wx:elif="{{week==5}}">星期{{week}}：吃稀饭</view>
<view wx:else>星期{{week}}:吃西餐</view>

me.js

 data: {week: Math.floor(Math.random()/7+1)},

因为wx：if是一个控制属性，所以在页面结构文件代码中需要将它添加到上例view组件标签上。
如果需要一次性控制多个组件标签，就需要使用block标签，将多个组件标签包装起来，并用wx:if控制属性。
举例：

me.wxml

<block wx:if="{{week>=5}}">
<view>苗条</view>
<view>西餐</view>
</block>
<block wx:if="{{week>=3}}">
<view>馒头</view>
<view>稀饭</view>
</block>
<block wx:else>
<view>饺子</view>
<view>米饭</view>
</block>

效果如图：

上面讲解了 wxml和js 下面我们来讲解一下 wxss

4.0 wxss（页面样式文件），是一套样式语言，用于描述wxml的组件样式。wxss沿用了css的大部分特色，也新增了尺寸单位和样式导入俩个方面的内容。这些内容后面再讲，现在先讲一下wxss的选择器：

选择器样例功能介绍
.class – .into – 样式作用于所有拥有class=“into” 的组件。

微信开发文档：
https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

微信小程序安装与开发步骤相关推荐

基于mpvue开发微信小程序，入门开发步骤
接下来..... 1. 初始化一个 mpvue 项目现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 No ...
微信小程序云函数开发环境 node.js的安装参考
微信小程序云函数开发环境 node.js的安装参考下载:nvm-windows 下载下图安装包,地址在: https://github.com/coreybutler/nvm-windows/rel ...
3.1【微信小程序全栈开发课程】在本地搭建后端开发环境
第二章将前端页面的框架基本搭建好了,第三章,我们来做登录功能,登录功能需要在后端获取到用户信息,返回到前端.所以先来搭建后端开发环境 1.后端开发环境介绍我们的项目用的是前后端分离开发前端可以理解 ...
微信小程序公众号开发
微信小程序&公众号开发一.什么是微信开发二.微信开放平台三.微信公众平台四.小程序与公众号的区别 1. 用途不同 2. 运营方式不同 3. 操作方法不同 4. 用户体验不同(公众号操作 ...
微信小程序应用号开发教程！博卡君通宵吐血赶稿
微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧对了,昨天晚间微信小程序开发文档官方版发布了微信 ...
微信小程序——账号及开发工具
1. 注册微信小程序账号点击我进入微信公众平台进入后点击立即注册注册成功且登录后进入小程序管理后台 2. 安装开发者工具点击进入开发文档进入安装开发工具(稳定版本) 一路默认下一步进行安装 ...
eslint不报错 vue_2-2【微信小程序全栈开发课程】index页面搭建--ESlint格式错误
1.修改入口文件也就是src/pages/index/main.js文件 main.js是入口文件,通过main.js来加载index.vue文件.每个页面文件夹中都要有main.js文件 //加载 ...
3.2【微信小程序全栈开发课程】登录功能（一）--实现登录功能
在本地搭建好后端环境之后,我们来实现登录功能 1.安装SDK插件 SDK插件用来获取用户的openId SDK是server端(也就是后端)的插件,帮助我们很容易的获取openId.openId是微信 ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...

微信小程序安装与开发步骤

微信小程序安装与开发步骤

微信小程序安装与开发步骤相关推荐

最新文章

热门文章