陕西高速公路建设集团网站,企业网站怎么备案,怎样做医疗保健网站,昵图网免费素材图库一.注册小程序账号#xff0c;下载IDE
1.官网注册https://mp.weixin.qq.com/#xff0c;并下载IDE。
2.官方文档一向都是最好的学习资料。
注意#xff1a;
#xff08;1#xff09;注册账号之后会有一个appid#xff0c;新建项目的时候需要填上#xff0c;不然很多…一.注册小程序账号下载IDE
1.官网注册https://mp.weixin.qq.com/并下载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文件
1var 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标签
viewtexticonswiperblockscroll-view等等这些标签直接查官网文档即可 三.小程序框架、各个页面以及发布上线的注意点 1.整个框架中的一些注意点
1整个wxml页面最底层的标签是page/page哦。
2 每个页面顶部导航栏的颜色title在本页面的json中配置如果没有配置的话取app.json中的总配置哦。
3json中不能写注释哦不然会报错的。
4路由相关 1使用wx.SwitchTab跳转tab页的话在app.json中除了注册pages页面还需要在tabBar中注册tab页才能生效哦。
注意tab最多5个也就是我们说的头部或者底部最多5个菜单。其他的页面只能通过其他路由方法打开哦。
2navigateTo是跳到某个非tab页比如欢迎页电影详情页城市选择页在app.json中注册后不能在tabBar里注册哦不然同样也是不能跳转的哦。
3reLaunch跳转新开的页面左上角是没有退回按钮的本项目只用了一次切换城市的时候哦。
5页面之间传递参数
参数写在跳转的url之中然后另一个页面在onload方法中的传参option接收到。如下传递和获取id 6data-开头的自定义属性的使用
比如wxml中我们怎么写
点击的事件对象可以这么取var postId event.currentTarget.dataset.postid;
注意 大写会转换成小写带_符号会转成驼峰形式
7事件对象eventevent.target和event.currentTarget的区别
target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件。
比如轮播图组件点击事件应该要绑定到swiper上这样才能监控任意一张图片是否被点击
这时target这里指的是image因为点击的是图片而currentTarget指的是swiper因为绑定点击事件在swiper上
8使用免费的网络接口
本项目中用到了 和风天气api腾讯地图api百度地图api豆瓣电影api聚合头条新闻api等具体用法可以看各自官网的接口文档哦很详细的
注意免费接口是有访问限制的所以如果用别人的组件用了这种接口的话最好还是自己注册一个新的key替换上哦
附上一个免费接口大全
https://github.com/jokermonn/-Api 另外还要注意要把这些接口的域名配置到小程序的合法域名中不然也是访问不了的 注意wxss有一个坑无法读取本地资源比如背景图片用本地就会报错哦。
把本地图片弄成网络图片的几种方式 上传到个人网站QQ空间相册等等也是可以的哦
四、推荐几个小程序开发的资料
1知乎一篇小程序的资料
https://www.zhihu.com/question/50907897
2小程序社区
http://www.wxapp-union.com/portal.php
3极乐小程序商店
http://store.dreawer.com/
