博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序的开发
阅读量:4578 次
发布时间:2019-06-08

本文共 3055 字,大约阅读时间需要 10 分钟。

现在一直看到有关于微信小程序的问题,我也来看看这个是怎么弄的 我是以个人的身份开注册是微信小程序

1.点击微信公众平台里面的注册,就会看到有四个账号类型,点击小程序,然后看到这个页面

填写完整自己的信息,就注册完成了!

注意:在填写小程序名字的时候要想好,因为这个名字在发布之后,就不能更改了

2,登录微信小程序

在首页看到的是这个页面,然后看流程那儿,很清楚的说明了之后应该执行哪几步

流程走完之后,就进入了开发阶段,我们可以看一下官方的文档(https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017712),这里面包括了大部分的组件 框架 api等,基本满足我们的需求。现在介绍几个构成一个页面:

就只是写了一个页面

1.轮播图

html
jsPage({ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: false, autoplay: false, interval: 5000, duration: 1000, hasLocation: false }, changeIndicatorDots: function (e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay: function (e) { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange: function (e) { this.setData({ interval: e.detail.value }) }, durationChange: function (e) { this.setData({ duration: e.detail.value }) },});cssimage{width:100%}

2.分类

html
美食
甜点
工作餐
夜宵
css.sort .flex-item { width:25%; height:60px; line-height:60px; text-align:center; float:left; background:#e9f0fa}.sort .active{ background:#dfe5ef}

 3.获取当前位置

htmljs//获取经纬度  getLocation: function (e) {    console.log(e)    var that = this    wx.getLocation({      type: 'gcj02', //返回可以用于wx.openLocation的经纬度      success: function (res) {        var latitude = res.latitude        var longitude = res.longitude        wx.openLocation({          latitude: latitude,          longitude: longitude,          scale: 28        })      }    })  },

官方文档写的还是很清楚的

3.页面之间的跳转,要设置一下路由,在写之前要先看清楚官方的文档

从index跳转到detail并且获取到从index传给detail的参数 这里面用的navigator并且渲染的时候用的是一个类似于vuejs中的v-for指令,然后再datail中用onLoad函数中的options获取到传递的参数

在index中

html
jspage中的data中 listImage:[ {mark:'one',src:'././image/1.jpeg'}, { mark: 'two',src: '././image/2.jpeg'}, { mark: 'three', src: '././image/3.png' }, { mark: 'four',src: '././image/4.png' }, { mark: 'five', src: '././image/5.jpeg' }, { mark: 'six', src: '././image/6.png' }, ] },

在app.json中

{  "pages":[    "pages/index/index",    "pages/logs/logs",    "pages/concat/index",    "pages/index/detail/index"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"black"  }}

在detail中

html
{
{mark}}
jsPage({ data: { mark:0 }, onLoad:function(options){ this.setData({ mark: options.mark }) }})

  

 

转载于:https://www.cnblogs.com/GainLoss/p/7201586.html

你可能感兴趣的文章
codeforces 502 g The Tree
查看>>
树的一些问题
查看>>
绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)...
查看>>
用expect 实现切换用户时自动输入密码
查看>>
javascript 获取当前对象
查看>>
设计模式(三)---抽象工厂模式
查看>>
bzoj1061: [Noi2008]志愿者招募
查看>>
推荐一款开源、免费的标记语言转换工具,各种文档格式自由转换
查看>>
Erlang基础Mnesia 之应用场景(Why)
查看>>
java使用SimpleDateFormat实现字符串和日期的相互转换
查看>>
JDK动态代理
查看>>
od 转储 二进制文件常用命令
查看>>
HDU 2136 Largest prime factor 參考代码
查看>>
Matlab---串口操作---数据採集篇
查看>>
有趣Web之Json(四)---json与(Object/List/Map)相互转化
查看>>
SQL于DML(数据库操作语言)采用
查看>>
静态库和动态库
查看>>
移位寄存器
查看>>
java环境变量配置
查看>>
Win32K里的死循环
查看>>