微信小程序知识体系梳理

2018-3-9 seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

小程序介绍

17年一月9号，小程序刚发布的时候，个人很幸运的成为第一批吃螃蟹的人，当然也是第一批采坑的人。

小程序是基于微信的一种应用，使用微信自定义的组件，让我们使用JavaScript的方式，达到匹配原生应用的效果。小程序的一大优势就是，你只要有个微信，你就能搜索你所需要的点餐、买票、旅游等一些日常需求的小程序，而且——用完即毁、无需下载。

小程序开发所需要的技能

小程序是最适合前端开发人员，你所需的知识仅仅是JavaScript、css、html的基本知识，如果你有其他单页面应用的开发经验，那小程序会很快上手，但是这都不是必须的。

小程序的知识体系的梳理

项目整体架构

app.js 小程序的启动js文件。

app.json 小程序的全局json配置文件。同时也可以进行pages配置、底部tab切换的配置等等。

app.wxss 小程序的全局样式。

pages 小程序的相关页面。在app.json中配置了pages，pages文件夹就会自动出现对应的页面。

pages

js 是小程序的逻辑部分。
wxss 小程序的对应page的布局，也就是局部样式。相当于web网页的css。
wxml 页面布局。相当于web网页的html。
json 小程序的局部页面配置。

小程序路由

1、push路由
wx.navigateTo({
url:’/pages/index/index’
});

2、替换路由
wx.redirectTo({
url:”/pages/index/index”
});

3、路由回退
wx.navigateBack({
delta: 1
});

4、tab切换
wx.switchTab({
url:’相关页面路径’
});

5、路由清理替换
wx.reLaunch({
url:’新的页面路径’
});

小程序路由传参

wx.navigateTo({
url: “/pages/index/index?id=”+inputValue
});
就会把inputValue的值传递过去。在相应的界面的onLoad周期函数的options中接收。

//index.js
onLoad: function(options){
console.log(options.id);
}

小程序界面交互（Toast、Modal）

Toast分三种：sucess、loading、none；
Modal：title、content属性是必须要的。
modal还有一些其他的属性，比如确认按钮的显示。

小程序page的生命周期

onLoad——初始化加载一次
onReady——页面初次渲染完成
onShow——监听页面显示
onHide——监听页面隐藏
onUnload——监听页面卸载

生命周期函数的本质：给开发人员一个触发时机的暴露的接口。在这样的时机下，我们可以做什么？

小程序如何更改data

vue中：this.message = ‘hello world’;
小程序中：
this.setData({
message: ‘hello world’
})

小程序分享功能

使用onShareAppMessage函数可以实现分享转发功能。
onShareAppMessage: function(){
return {
title:’图吧同行’,
path:’/pages/index/index’,
desc:’描述信息’
}
}

登录功能

小程序的登录是一个项目的核心逻辑。分为三步。

第一步：wx.login，获取code。
第二步：把code发送给我们的后台服务器，得到openId。
第三步：服务器把openId返回给你。你就知道每次是哪一个用户登录了小程序。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

分享本文至：

« 前端性能优化 —— 移动端浏览器优化策略关于placeholder(); »