小程序项目总结

小程序文件目录介绍：

微信开发者平台 https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/
文件目录介绍链接

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个页面的结构文件

wxml文件

wxml （weixin markup languge）是微信小程序页面的结构文件。里面定义了整个类似html的骨架
微信组件介绍https://developers.weixin.qq.com/miniprogram/dev/component/

WXSS文件

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS文件详细介绍

js文件

行为 (js 代码)交互模式，需求:点击按钮，弹出一个提示信息(web onclick alert)微信小程序没有传统的dom 开发模式，基于我们的vuejs react 这类的数据驱动开发模式，无需dom操作。

对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。

使用 Page 构造器注册页面

Pages是小程序页面加载执行的一个函数。由小程序内部提供
可以接受对象

数据

使用插值表达式进行显示
data数据的使用{{ }}

1 基本数据的显示

<view>{{title}}</view>

2可以完成四则运算

<view>m+n={{m+n}}</view>

3可以完成条件判断 条件满足显示true，不满足false

<view>m>n</view>

4 三目三元：age>18 ? '已经成年了' : '未成年'

<view>{{age>18 ? '已经成年了' : '未成年'}}</view>

5 数据相应式变化 (实现按钮按下，然后age自动加1)

------wxml部分------
<view>{{ age }}</view>
<button type="primary" size="mini" bindtap="tapHandler">按钮</button>
------js部分-----
tapHandler(){
1、拿到数据
this.data.age
2、修改数据
直接修改数据 （不可取）
this.data.age+=1;  #页面不会响应式更新数据
使用api修改
this.setData({
age: this.data.age+1
})

}

小程序里面不能直接修改的，不会响应式更新数据。需要使用小程序中的api 的setData

页面生命周期函数

生命周期函数就是定义一个页面从初始化到销毁的过程使用的函数，会在特定的时间或者事件上自动的触发
详细信息请查看文档

生命周期回调函数

• onShow()
  页面显示/切入前台时触发。
• onReady()
  页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。详见生命周期

• onHide()
  页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

• onUnload()
  页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

• onRouteDone()
  路由动画完成时触发。如 wx.navigateTo 页面完全推入后 或 wx.navigateBack 页面完全恢复时。

页面事件处理函数

• onPullDownRefresh()
  监听用户下拉刷新事件。
• onReachBottom()
  监听用户上拉触底事件。
• onPageScroll(Object object)
  监听用户滑动页面事件。
• onAddToFavorites(Object object)
  监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。
• onShareAppMessage(Object object)
  监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。
• onShareTimeline()
  监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。
• onResize(Object object)
  页面尺寸改变时触发。
• onSaveExitState()
  每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用，可以进行退出状态的保存

组件事件处理函数

• 定义组件事件处理函数

<view bindtap="viewTap"> click me </view>
Page({
  viewTap: function() {
    console.log('view tap')
  }
})

• Page.route 到当前页面的路径，类型为String

Page({
  onShow: function() {
    console.log(this.route)
  }
})

页面间通信

如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：

• 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；
• wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。

这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

全局数据

一、globalData

app.globalData 存储数据

const app = getApp();
//缓存全局保存
app.globalData.changeshop = changeshop;

在需要使用的地方

const app = getApp()
let changeshop = app.globalData.changeshop;
if (changeshop) {
    self.setData({
        addrs: changeshop
    });
}

二、本地缓存

1. 存入缓存

var addressList= wx.setStorageSync(key,value)

2. 取出缓存

var addressList= wx.getStorageSync(key)

3. 清除缓存

wx.removeStorageSync(key)

4. 清除所有缓存

wx.clearStorageSync()

三、基于mobx

文章链接：https://developers.weixin.qq.com/community/develop/article/doc/0004686e3c8980b53469f176e51413

小程序使用npm包

在项目的跟目录下使用 cnpm i moment

下载完成后会在node_moments文件夹下
然后选择 工具-构建npm

使用moment包

rpx的介绍

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

项目中常用实例

网络请求的轮播图

swiper标签使用

轮播图有默认的高度150px，需要改样式的高和宽度

wxml文件

<view>
<swiper
autoplay="{{ true }}"  是否自动切换
indicator-dots="{{ true }}"  是否显示面板指示点
indicator-active-color="#f00" 当前选中的指示点颜色
indicator-color="#0f0" 指示点颜色
>
<swiper-item wx.for={{ bannerList }} wx:key='id'>
<image src="item.pic_url"class="img"/>
</swiper-item>
</view>

swiper-item中使用列表渲染wx.for={{ bannerList }} wx:key，bannerList是页面数据data函数中的数据，根据网络请求拿到的json列表数据 item是每次循环返回的单个列表中的一个数据
wxss文件

page{
padding: 0 24rpx; 给page标签增加边框距离上下为0，左右24rpx
}

.img{
width: 704rpx;
height: 254rpx;
}

swiper{
background-color: #ccc;
width: 704rpx;
height: 254rpx;
}

js文件

data: {
bannerList: [],
}

onLoad(){
	wx.request({
	url:'',
	mothod:'GET',
	success: (res) =>{
		this.setData({
		   bannerList: res.data.data.home_pages[0].banners,
				})
		}
	})
}

如果不使用this.setData,数据不会响应式,res.data.data.home_pages[0].banners是接口返回的数据

网络请求实例：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

页面跳转

页面跳转主要有两种方式，第一种组件方式、API方式

组件方式页面跳转

使用<navigator url='/pages/url/url'>组件标签。如果需要向跳转页面传递参数就在使用？key=value&&key=value，跳转的页面接受参数时使用options

API页面跳转

wxml文件中使用函数调用的方式去跳转到指定的页面，并传递参数

在循环遍历的对象中要想获取item对象的属性使用event
event教程：https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/core/event.html

event参数

api页面返回

返回上以页面调用

返回首页