微信小程序知识体系梳理

2018-3-9 释然 前端技术资源

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

小程序介绍

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返回给你。你就知道每次是哪一个用户登录了小程序。

万达主管,万达主管QQwww.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


标签: 微信小程序知识体系梳理

分享到: 新浪微博 腾讯微博 微信 微信 更多

Powered by emlog 京ICP备12006971号-1 sitemap
友情链接:万达注册  万达娱乐平台  guoqibee.com  万达娱乐平台  万达娱乐注册  万达招商QQ  万达娱乐招商  万达娱乐主管QQ  万达娱乐直属  万达开户