一、创建项目

1. 准备工作

注册开发者账号

安装小程序开发工具

创建项目

2. 认识项目目录

pages 是存放所有视图的目录

utils 是存放工具类库的目录

app.js 是小程序的全局入口文件

app.json 是小程序的全局配置文件

app.wxss 是小程序的全局样式文件

project.config.json 是项目的配置文件

sitemap.json 是小程序的SEO优化文件，方便用户搜索到该小程序

3. app.json

pages里面注册的是视图

window 是全局窗口配置

backgroundTextStyle 设置文本样式

navigationBarBackgroundColor 设置导航栏背景

navigationBarTitleText 设置导航栏文本

navigationBarTextStyle 设置导航栏文本样式

style 设置样式级别，默认是v2

sitemapLocation 指明 sitemap.json 的位置；默认为 'sitemap.json' 即在 app.json 同级目录下名字的 sitemap.json 文件

4. app.wxss

是小程序的全局样式文件，其实就是css文件

5. project.config.json

setting 里面的配置，也可以通过：详情-本地设置

6. 页面组成

xxx.wxml 是页面，相当于html文件，但是它里面不能写原生的html标签，只能写微信自己的组件。

xxx.wxss 是样式，相当于css文件。

xxx.js 是js文件，书写页面逻辑程序。

xxx.json 是配置文件，配置当前页面信息。

7. xxx.wxml

view组件，相当于html中的div标签。

text组件，相当于html中span标签。

swiper是滑块视图组件，它里面只能放swiper-item组件。

image是图片组件，注意：小程序里面的图片最好全部采用网络图片，因为单个小程序打包后的代码总体积不能超过2MB。

<swiperindicator-dotsindicator-color="#ffffff"indicator-active-color="#248067"autoplaycircularinterval="{{3000}}"><swiper-item><imagesrc="图片地址"></image></swiper-item></swiper>

通过插值表达式{{}}，可以执行显示data里面的数据。

wx:for指令用于循环数组数据，生成组件。

item就是循环出来的每一项，index是每一项对应的索引。

item和index可以重命名，方式是wx:for-item="XXX" wx:for-index="XXX"。

wx:key="index"，设置每一项唯一的标识。

bindtap是点击事件，组件通过data-xxx传递数据。

<viewclass="item flex j-s a-c"wx:for="{{goodsList}}"wx:for-item="goods"wx:for-index="i"wx:key="index"><!-- {{index}}-{{item}} --><view>{{i}}--{{goods}}</view><!-- bindtap是点击事件，组件通过data-xxx传递数据 --><buttondata-name="{{goods}}"data-i="{{i}}"size="mini"bindtap="del">删除</button></view>

8. xxx.wxss

微信为了让页面里面的内容在各种设备上能够正常显示，提供了一种响应式单位rpx。

在iphone6尺寸中，1px==2rpx。

9. xxx.js

其实每个微信页面，就是一个Page()函数。该函数的参数是一个对象。

在Page()函数中添加页面的数据，方法等等。

页面中的数据，全部放到data中。

定义方法：

del(e){//获取组件传递的参数i（i是索引）leti=e.currentTarget.dataset.i//根据指定的索引，从数组中，删除对应的数据this.data.goodsList.splice(i,1)//数组中的数据删除后，还要触发页面更新this.setData({//将最新的数据，传递给页面显示goodsList:this.data.goodsList})}//this指向当前页面对象。//setData()方法，触发页面更新哪些数据。

10. xxx.json

配置当前页面信息，用法根app.json一样。

二、tabBar&跳转

1. 条件判断

wx:if wx:elif wx:else 指令用于判断条件，满足条件显示上面的组件。

wx:if 是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

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

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

直接在组件上绑定表达式：

<view class="item {{i%2===0?'blue':''}}" style="color:{{i%2===0?'red':''}}">

2. tabBar

在app.json文件中添加tabBar节点。

color：tab上的文字默认颜色，仅支持十六进制颜色。

selectedColor：tab上的文字选中时的颜色，仅支持十六进制颜色。

backgroundColor：tab的背景色，仅支持十六进制颜色。

borderStyle：tabbar上边框的颜色， 仅支持 black / white。

position：tabBar的位置，仅支持 bottom / top。

custom：自定义tabBar。

list：tab的列表。

list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。

pagePath：页面路径，必须在 pages 中先定义。

text：tab 上按钮文字。

iconPath：图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

当 position 为 top 时，不显示 icon。

selectedIconPath：选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

当 position 为 top 时，不显示 icon。

3. 跳转

navigator组件，用于页面链接，默认只能跳转普通页面。

如果要跳转tabBar页面，需要设置open-type="switchTab"。

<navigatorurl="/pages/details/details">详情</navigator><navigatoropen-type="switchTab"url="/pages/menu/menu">菜单</navigator>

代码跳转：

跳转到普通页面

wx.navigateTo({url:'/pages/details/details',})

跳转到tabBar页面

wx.switchTab({url:'/pages/menu/menu',})

使用方法跳转页面的好处是：在跳转之前可能需要做其他事情，比如：验证权限等等。

4. 确认框和消息框

确认框：

wx.showModal({

title:”标题”,

success:res=>{}

})

消息框：

wx.showToast({

title:”标题”,

duration:1000

})

5. 封装方法

确认框方法：

function$confirm(title){returnnewPromise((resolve,reject)=>{//确认框wx.showModal({title,success:({confirm})=>{if(confirm)resolve()}})})}

消息框方法：

function$msg(title,duration=1000,icon='success'){//弹出消息框wx.showToast({title,duration,icon})}

获取事件参数的方法：

function$key(e){returne.currentTarget.dataset}

export 是ES6的导出语句。

将封装的方法放到util.js文件中

//确认框方法exportlet$confirm=function(title){returnnewPromise((resolve,reject)=>{//确认框wx.showModal({title,success:({confirm})=>{if(confirm)resolve()}})})}//消息框方法exportlet$msg=function(title,duration=1000,icon='success'){//弹出消息框wx.showToast({title,duration,icon})}//获取事件参数的方法exportlet$key=function(e){returne.target.dataset}

import是ES6的导入语句。

import {confirm,confirm,key,$msg} from '../../utils/util'。

将这些工具方法注册给wx对象

wx对象是微信小程序的全局对象，在任何地方都可以使用。

wx.msg=msg=msg

wx.confirm=confirm=confirm

wx.key=key=key

在app.js入口文件中导入

import './utils/util'

awaitwx.$confirm('确定删除吗')//获取组件传递的参数i（i是索引）let{i}=wx.$key(e)//根据指定的索引，从数组中，删除对应的数据this.data.goodsList.splice(i,1)//数组中的数据删除后，还要触发页面更新this.setData({//将最新的数据，传递给页面显示goodsList:this.data.goodsList})//消息框wx.$msg('删除成功')