微信小程序开发

zwp06 2018-03-30 原文

微信小程序开发

序言:小程序刚出来的时候,关注度高的无与伦比,但是出来后关注瞬间掉了,因为无法跟原生app相比,也没有更好的推广。或者受环境影响,现在的小程序慢慢的完善,有了一定的需求量了,说这么多废话就是,公司现在要求开发小程序,所以重新关注了一下小程序。今天简单说说几点吧

 

第一,嵌套h5页面,怎么嵌套呢?

那就简单说说web-view 组件,这是一个可以用来承载网页的容器,会自动铺满整个小程序页面。

类似于Frame、Iframe、Frameset标记,只是对于目前来说,web-view还缺乏灵活性

例如这样

<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>

其实两个属性,一个src这个就是你所要链接的h5页面地址,另一个bindmessage,简单意思就是在特定情况是触发并收到消息。

简单介绍下,具体了解可打开https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

第二微信小程序请求接口

通过wx.request来处理,看下面代码是否很熟悉,跟我们使用的ajax是不是很像,没错,你想的没错微信小程序获取数据就是这么简单。而且后台管理这些都没变。这就不多说了
wx.request({  
      url: 'test.json',//上线的话必须是https,没有appId的本地请求貌似不受影响  
      data: {},  
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT  
      // header: {}, // 设置请求的 header  
      success: function(res){  
        console.log(res.data)     
   }, fail:
function() { // fail }, complete: function() { // complete } })

参考文档https://developers.weixin.qq.com/miniprogram/dev/api/network-request.html#wxrequestobject

后续开发遇到问题也可以相互讨论,毕竟接下来将进入开发环节了。

微信小程序只要去看下微信小程序文档,我觉得对于大家来说都是没啥问题的。

噢,说一个微信跳转传参的小东西

跳转的数据传递

以wx.navigateTo为例:

简单讲述,wx.navigateTo传入的url是跳转的页面(使用相对路径)

wx.navigateTo({
    url:"pages/test/test"
});

 

那么参数传递至下一页面,则只需要在路径后面,添加?问号,?后面接的是参数,以key-value的方式。

这里传了个value为1的参数

wx.navigateTo({
    url:"pages/test/test?num=1"
});

 

然后在test.js中的onLoad()函数中得到值:option.num就可以得到了,如下:

onLoad: function (option) {
    this.setData({
        type:option.num,
    });
    console.log(option.num);
}

 

这样就可以获取到你传递过来的参数了,然后要怎么开发就怎么开发啦。

嗯,今天聊到这,准备开发工作,下周开始开发、、、、遇到问题再跟大家分享。。

发表于 2018-03-30 15:01 小若风 阅读() 评论() 编辑 收藏

 

版权声明:本文为zwp06原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/zwp06/p/8676253.html

微信小程序开发的更多相关文章

  1. 微信小程序开发

    微信小程序开发 微信小程序官方API文档: https://mp.weixin.qq.com/debug/wx […]...

  2. 微信小程序开发 (基础)——账号注册/登录完整流程

    概述 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应 […]...

  3. 微信小程序开发

    一、微信小程序 小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播 […]...

  4. 微信小程序开发——开发者工具中素材管理功能使用的注意事项

    微信小程序开发——开发者工具中素材管理功能使用的注意事项 为什么使用“素材管理”: 微信小程序环境中本地资源图 […]...

  5. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的 […]...

  6. 微信小程序开发 – 用户授权登陆

    准备:微信开发者工具下载地址:https://developers.weixin.qq.com/minipro […]...

  7. 小程序开发者福利,高清壁纸推荐微信小程序源码开源及项目介绍

    本项目是视频课程《小程序开发入门之实战案例解析:高清壁纸推荐(2020新版)》的案例源码,旨在结合真实项目案例 […]...

  8. 技术大佬:我去,这个容易被忽略的小程序Image图片属性,竟然这么屌!

    前段时间在做“高清壁纸推荐”小程序优化的时候,发现一个很实用的图片属性——能够实现最大化压缩图片大小、且图片质 […]...

随机推荐

  1. 原 docker 安装使用 solr

    1、安装solr 7.5 docker solr 官网:https://hub.docker.com/_/so […]...

  2. Vue.js 2.x:组件的定义和注册(详细的图文教程)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我,一起入门和进阶前端 […]...

  3. JVM内存管理——总结篇

    JVM内存管理——总结篇 自动内存管理——总结篇 内存划分及作用 常见问题 内存划分及作用 程序计数器 线程私 […]...

  4. .NET Core微服务之基于Consul实现服务治理

    Consul是HashiCorp公司推出的开源工具,用于实现分布式系统的服务发现与配置。与其他分布式服务注册与 […]...

  5. Adobe Reader 8.1.2 无法安装或者卸载成功的解决办法

    在Adobe Reader 8.1.2 安装或者卸载的时候出现错误提示:”无法应用变换程序.请确认 […]...

  6. 用call或bind实现bind()

    一、bind方法 让我们看一下MDN上对bind方法的解释     bind()方法创建一个新的函数,在bin […]...

  7. 报告论文:BCD 计数器 数字钟

    实验一  组合逻辑电路设计 一、        设计目的 熟悉MAX+plusII的VHDL文本设计流程全过程 […]...

  8. css3实现模糊背景

    实现全背景模糊,头像或者文字正常显示,实现的效果如下: 用到的主要属性: z-index叠加 , positi […]...

展开目录

目录导航