微信小程序> 微信小程序开发第一个小程序-一个微信可以做几个小程序-公众号小程序怎么做

微信小程序开发第一个小程序-一个微信可以做几个小程序-公众号小程序怎么做

浏览量:2329 时间: 来源:张文琪
1.

这几个月都在忙着准备考研都不怎么研究代码了,前几天老师安排要做毕业设计的开题报告,所以就稍微兼顾着学习了点微信小程序的开发。昨天看了一会官方给的开发文档就是实例少了点,不过有个demo可以抠代码。等考研初试结束,想自己写个文档总结一下小程序。

准备工作2.

开发工具:使用官方提供的“微信web开发者工具”就很好,可以在“微信公众平台”官网上下载。工具自带的工具,比如说上传、模拟器、调试器等都是很好用的项目结构:很标准的网页开发结构(JS+HTML+CSS),只不过这里换了个名字(JS+WXML+WXSS)项目创建:APPID需要到微信公众平台—设置—开发设置中查找资源添加:貌似只能通过文件目录向项目中添加

小例子3.

实现结果:实际上就是切换图片的功能

4.

项目目录:images是我自己创建的,图片添加需要在项目文件目录中添加其他都是自动生成的,很容易理解,index.wxml就是主页面,index.js和index.wxss是其附属的

5.

代码分析:index.js:

Page({data:{//可以理解为定义属性index:1,mysrc:"../../images/image1.jpg",but_msg:"下一个",ifplus:true},button:function(e){//监听事件if(this.data.index+16this.data.ifplus){this.data.ifplusfalsethis.data.index5}if(this.data.index-11!this.data.ifplus){this.data.ifplustruethis.data.index0}if(this.data.ifplus){this.data.indexthis.data.index+1if(this.data.index!5)this.data.but_msg"下一个"elsethis.data.but_msg"上一个"}else{this.data.indexthis.data.index-1this.data.but_msg"上一个"}this.setData({//在这里修改属性值可以刷新到页面,也就是改图片的地址和按钮里的文字mysrc:"../../images/image"+this.data.index+".jpg",but_msg:this.data.but_msg})}})6.

index.wxml:

viewclass"container"viewclass"userinfo"textclass"userinfo-nickname"欢迎大家/text/viewimagebindtap'button'class"show"src"{{mysrc}}"/imagebuttonbindtap'button'class"button"{{but_msg}}/button!--mysrc,but_msg都是js中data中定义的属性--!--bindtap可以看作是注册监听事件--!--class是与样式表有关--/view7.

样式表基本没什么区别就不放上来了

真机测试8.

1、先从开发工具中上传代码2、在微信公众平台——开发管理中可以看到开发、审核、线上三个版本,工具上传到开发版本,在开发版本后面点击倒三角可以修改主页路径,如图示:也就是访问小程序的第一个页面,开发版本可以提交审核,审核版本可以提交上线,审核的时间比较长而且内容必须符合要求。3、点击图中所示位置可以打开小程序二维码,扫码可以访问该小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎