美文网首页小程序学习
微信小程序知识体系梳理

微信小程序知识体系梳理

作者: ui设计好分享 | 来源:发表于2018-03-23 17:10 被阅读0次

小程序介绍

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

阅读全文

相关文章

  • 微信小程序知识体系梳理

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

  • 浅谈微信矩阵

    微信体系矩阵: 1)微信公众服务号 比如:嵌入 小程序 「承载商城」 「会员体系」 2)微信小程序 微信小程序相当...

  • 小程序基础[02]-小程序框架的文件体系

    本文介绍开发微信小程序项目中的体系结构和组成部分。 1.0 微信小程序框架体系 微信小程序框架体系由两部分组成,分...

  • 小程序好文集合

    组件篇 微信小程序:组件实践 整体梳理 微信小程序开发深入解读

  • 浅谈微信小程序

    前言 太多时间遇到微信小程序的渗透测试,而自身就对其不甚了解,借此梳理微信小程序的一些知识点。 开发流程 小程序可...

  • 微信小程序日历组件开发

    # 微信小程序日历组件开发 微信小程序基础知识 微信小程序 框架介绍 组件文档 上述是开发小程序的基本知识。 今天...

  • 小程序登录为什么能做到更好的体验

    小程序登陆为啥能做得这么简洁优雅呢?首先,我们需要大致了解小程序用户体系。 小程序用户体系 对于每个小程序,微信都...

  • 【教程】微信小程序入门

    微信小程序入门基础知识 Moustache:我的微信小程序入门踩坑之旅 github精选:微信小程序入门简要教程 ...

  • 健身房小程序开发多少钱

    微信小程序的出现,给很多的行业带来了新的体验。‌‌那么健身行业又该如何利用微信小程序开发搭建智能健身体系呢?微信小...

  • 微信小程序登录

    小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。小程...

网友评论

    本文标题:微信小程序知识体系梳理

    本文链接:https://www.haomeiwen.com/subject/sfvxcftx.html