热门关键字:
jquery > jquery教程 > jquery教程 > 小程序用什么开发?快速开发一个自己的微信小程序教程

小程序用什么开发?快速开发一个自己的微信小程序教程

333
作者:管理员
发布时间:2021/7/14 17:53:40
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5066
  一.写在前面


  1.为什么要学小程序开发?


  对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。


  2.开发准备:


  (1)有人开玩笑说,会vue小程序根本都不用学:


  微信小程序虽然是腾讯自己搞的,但是核心的思想跟vue等框架是一样一样的哦——


  (2)善于搜集精美的小组件: “我们不生产代码,我们只是代码的搬运工”,善于找到想要的组件并把他们巧妙优雅的组装成一个大项目,也算是程序员一项基本技能了。


  具体怎么找到想要的小程序demo,篇末会给大家推荐小程序的资源,有很多大神的项目哦


  撸起袖子开干了


  一.注册小程序账号,下载IDE


  1.官网注册并下载IDE。


  2.官方文档一向都是最好的学习资料。


  注意:


  (1)注册账号之后会有一个appid,新建项目的时候需要填上,不然很多功能是用不了的,比如不能预览,不能上传代码等等。


  (2)如果你注册过微信公众号的话,一定要注意,微信公众号和小程序是两个账号,二者的appid也是不同,小程序开发必须使用小程序的appid哦。


  二.小程序框架介绍和运行机制


  1.我们建立了“普通快速启动模板”,然后整个项目目录如下:


  2.app.js


  整个项目的启动文件,如注释写的onlaunch方法有三大功能,浏览器缓存进行存和取数据;用登陆成功的回调;获取用户信息。


  globalData是定义整个项目的全局变量或者常量哦。


  3.app.json


  整个项目的配置文件,比如注册页面,配置tab页,设置整个项目的样式,页面标题等等;


  !注意:小程序启动默认的第一个页面,就是app.json的pages中的第一个页面哦。


  4.pages


  小程序的页面组件,有几个页面就会有几个子文件夹。比如快速启动模板,就有两个页面,index和logs


  5.打开index目录


  可以看到有三个文件,其实和我们web开发的文件是一一对应的。


  index.wxml对应index.html;


  index.wxss对应index.css;


  index.js就是js文件哦。


  一般我们还会给每个页面组件添加一个.json文件,作为该页面组件的配置文件,设置页面标题等功能


  6.双击index.js文件


  (1)var app=getApp();


  引入整个项目的app.js文件,用来取期中的公共变量等信息。


  如果要使用util.js工具库中的某个方法,在util.js中module.exports导出,然后在需要的页面中require即可得到哦。


  (2)比如,我们要获取豆瓣电影的时候,我们需要调用豆瓣的api;我们先在app.js中的gloabData中定义doubanBase


  然后在index.js中使用app.globaData.doubanBase即可取到这个值。


  当然这些常量你也可以在页面需要的时候,再用写死的值,但是为了整个项目的维护,还是建议把这种公用参数统一写在配置文件中哦。


  (3)接下来在整个page({})中,第一个data,就是本页面组件的内部数据,会渲染到该页面的wxml文件中,类似于vue、react哦——


  通过setData修改data数据,驱动页面渲染


  (4)一些生命周期函数


  比如onload(), onready(), onshow(), onhide()等等,监听页面加载、页面初次渲染、页面显示、页面隐藏等等


  更多的可以查官网API哦。其中用的最多的就是onload()方法,和onShareAppMessage()方法(设置页面分享的信息)


  7 .wxml模板的使用。


  比如本项目电影页面,就是以最小的星级评价组件wxml当做模板,star到movie到movie-list,一级一级的嵌套使用。


  star-template.wxml页面写好name属性;然后import引入的时候通过name获得即可


  8.常用的wxml标签


  view,text,icon,swiper,block,scroll-view等等,这些标签直接查官网文档即可




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:html
友荐云推荐