精华内容
下载资源
问答
  • 微信小程序跳转到其他网页(外部链接)

    万次阅读 多人点赞 2018-03-08 13:48:50
    个人类型和海外类型的小程序不支持 web-view 标签 也就是说个人申请的小程序,就别想跳转了!!!! 1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢? 2.例如我想点击一个按钮,跳转到百度(百度...

    个人类型和海外类型的小程序不支持 web-view 标签  也就是说个人申请的小程序,就别想跳转了!!!!

    重磅消息 小程序逐渐会支持分享链接到朋友圈 点击下方链接前往查看演示地址

    分享朋友圈文章地址:https://blog.csdn.net/qq_32113629/article/details/107177622

    演示地址:

    1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢?

    2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开) 

    3.wxml

       1. index.wxml   (按钮页面)

    <view class='wrapper'>
        <button class='wepay' bindtap='goBaidu'>点击跳转</button>
      </view>

       2.out.wxml  (百度页面),

    <web-view src="https://www.baidu.com/"></web-view>
    //放心你没有看错就这么一行就行了//把你要跳转的界面用src 就可以了,以后要跳转到哪,src里面地址就写哪!

        3.别忘了,要在app.json中配置一下路由,

    "pages":[
        "pages/a/a",
        "pages/b/b"
      ],
    
    

        电脑上是可以跳转的,体验版的话,在手机上是不好使的,除非你已经在小程序后台完成了配置域名,但是!!!!

    注意!!这是顶级注释请看第四条


    4.需要配置业务域名并上传验证文件:

    这是我的vx公众号全是技术文章:

    这个是我本人的前端技术QQ交流群

     

     

     

    如果文章对你有帮助  希望各位可以给我的群 冲冲人气 

    4.1校验文件需要放在你要跳转到的网站的根目录下面才可以!!!也就是说你想跳转到别人网站网页里面 需要得到别人的同意!!

    那比如这个跳转到www.baidu.com 就是行不通的了,只能是自己在开发的时候玩玩(在开发者工具中点设置-项目设置-在不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 前面打上对勾),在正式发布时候肯定是行不通的!!!

    4.2那你想跳转到自己的网站中就需要配置域名、下载校验文件了!!再次强调 个人类型与海外类型的小程序暂不支持使用web-view

    进入到小程序后台 https://developers.weixin.qq.com   设置-开发设置 -业务域名

    4.3web-view 的 src可以是可打开关联的公众号的文章地址! (打开公众号这块也是个坑)

    5.index.js

    goBaidu:function(){
        wx.navigateTo({
          url:'../out/out', //
          success:function() {
    
          },       //成功后的回调;
          fail:function() { },         //失败后的回调;
          complete:function() { }      //结束后的回调(成功,失败都会执行)
     })

    6.效果图

     

     

    展开全文
  • 微信小程序富文本编辑器官方插件editor为微信小程序前端和图片接收后端,基于微信官方演示程序,去掉了多余的东西,加了一个后端接收图片的代码,直接可以使用,其他语言参照接收程序很简单。直接可以用。
  • 前端与移动开发----微信小程序----小程序(一)

    千次阅读 多人点赞 2021-04-17 09:50:28
    微信小程序

    微信小程序第一天

    1. 什么是小程序

    1.1 小程序的概念

    小程序是一种不需要下载、安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下就能打开应用,也实现了用完即走的理念,用户不用安装太多应用,应用随处可用,但又无须安装卸载

    在这里插入图片描述

    1. 特点:无需下载(并非不下载,而是小程序体积非常小,用户感知不到下载的过程 打开任意一个小程序(2MB))、无需卸载
    2. 理念:用完即走(让用户在短时间内完成某件操作,用户离开小程序即可,并不需要关注小程序本身)
    3. 入口:扫一扫、搜一下、群聊……
    1.2 小程序产生的目的

    拦截用户流量入口,今后,用户每天的大多数应用需求,都可以从微信小程序中获得

    2. 小程序与普通网页开发以及APP的区别

    1. 运行环境不同

      • 网页 运行在 浏览器环境
      • 小程序 运行在 微信环境
      • App 运行在 手机操作系统
    2. API 不同

      • 由于运行环境的不同,所以小程序中,无法调用 DOM 和 BOM 的 API
      • 但是,在小程序中可以调用微信环境提供的各种 API,例如:
        • 微信支付
        • 微信扫码
        • 地理定位
      • App 的 API 是手机操作系统给提供
    3. 开发模式不同

      • 网页的开发模式:代码编辑器 + 浏览器
      • 小程序拥有自己的一套标准开发模式
        • 申请小程序开发账号
        • 安装小程序开发者工具
        • 创建和配置并开发小程序项目
        • 在开发者工具中对代码进行上线
      • App 开发模式需要调用 IOSAndroid 的组件库

    3. 小程序开发的流程

    参考网址:微信公众平台

    1. 注册:在微信公众平台注册小程序,完成注册后可以同步进行信息完善和开发

      • 在实际开发中,注册通常由运营、产品经理、项目经理进行注册
      • 并不是前端程序员来进行注册
    2. 小程序信息完善:填写小程序基本信息,包括名称、头像、介绍及服务范围等

      • 在实际开发中,完善小程序的基本信息,通常是由运营、项目经理、产品经理进行完善
      • 前端程序员不要更改这些的基本信息
    3. 开发小程序:完成小程序开发者绑定、开发信息配置后,开发者可下载开发者工具、参考开发文档进行小程序的开发和调试

      • 前端程序员主要战场
      • 在实际开发中,开发一个小程序,首先需要将自己的微信号给相关的负责人绑定到注册的小程序中,才能够进行开发
      • 下载开发者工具
      • 参考开发文档进行小程序的开发
    4. 提交审核和发布:完成小程序开发后,提交代码至微信团队审核,审核通过后即可发布(公测期间不能发布)

      • 在实际开发中,小程序的发布和上线,可能是前端程序员或者相关的负责人进行发布和上线
      • 开发好项目以后,需要确认是否是由前端进行上线

    4. 注册小程序开发账号的流程

    需要在微信公众平台注册小程序账号

    微信公众平台:微信公众号平台

    微信公众号实际上分为 4 类:订阅号(就是咱们平台聊天时候说的公众号)、服务号、小程序、企业微信

    1. 点击注册按钮

      使用浏览器打开 微信公众平台 网址,点击右上角的 “立即注册” 即可进入到小程序开发账号的注册流程

    在这里插入图片描述

    1. 选择注册的帐号类型

    在这里插入图片描述

    1. 填写账号信息

      • 邮箱不能被个人微信绑定

    1. 邮箱激活

    在这里插入图片描述

    1. 点击链接激活账号

    在这里插入图片描述

    1. 选择主体类型

    在这里插入图片描述

    1. 主体登记信息

    在这里插入图片描述

    1. 注册完毕

    5. 获取小程序 AppID

    相当于小程序在微信中的“身份证”,有了 AppID ,微信客户端才能确定小程序“身份”,并使用微信提供的高级接口

    • 用来创建小程序项目
    • 调用一些高级的接口

    6. 微信开发者工具

    6.1 安装微信开发者工具
    1. 了解微信开发者工具

      微信开发者工具是官方推荐使用的小程序开发工具,它提供的主要功能如下:

      • 快速创建小程序项目
      • 代码的查看和编辑
      • 对小程序功能进行调试
      • 小程序的预览和发布
    2. 下载并安装微信开发者工具

      • 推荐下载和安装最新的稳定版 Stable Build 的微信开发者工具
      • 微信开发者工具下载地址
      • 安装方式: 下一步 --> 下一步
    6.2 扫码登录到微信开发者工具

    在这里插入图片描述

    在这里插入图片描述

    6.3 设置外观和代理
    1. 为什么需要代理设置 ?

      • 因为部分同学可能电脑安装了网络加速器或者翻墙工具,导致网络不稳定
      • 为了防止加速器造成网络的不稳定,所以推荐代理设置为 不使用任何代理

    在这里插入图片描述

    在这里插入图片描述

    6.4 演示新建小程序的步骤
    1. 点击 + 号,新建项目

      在这里插入图片描述

    2. 填写项目信息

    6.5 预览小程序的两种方式
    1. 在模拟器上查看项目效果

    2. 在真机上预览项目效果

    6.6 开发者工具主界面的 5 个组成部分
    1. 主界面的 5 个组成部分,从上到下,到左到右,依次是

      • 菜单栏
      • 工具栏
      • 模拟器
      • 代码编辑区
      • 调试区

    7. 小程序项目的构成

    7.1 小程序目录的构成
    1. pages 用来存放所有小程序的页面
    2. utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)
    3. app.js 小程序项目的入口文件 — main.js
    4. app.json 小程序项目的全局配置文件
    5. app.wxss 小程序项目的全局样式文件
    6. project.config.json 项目的配置文件
    7. sitemap.json 用来配置小程序及其页面是够允许被微信索引 – SEO – 搜索引擎优化

    在这里插入图片描述

    • json 文件在小程序中是配置文件
      • 不能写注释
      • 键和值都必须是双引号
      • 不能出现多余的逗号
    7.2 小程序页面的组成部分

    vue 单文件组件:3 个部分:template 、script、style

    小程序官方建议把所有的 小程序页面,都存放在 pages 目录中,每个页面以单独的文件夹存在

    其中,每个页面 由 4 个基本文件 组成,他们分别是:

    1. .js 文件 – 页面的脚本文件,存放页面的数据、事件处理函数、生命周期等
    2. .json 文件 – 当前页面的配置文件,配置页面的外观、表现等
    3. .wxml 文件 – 页面的模板结构文件
    4. .wxss 文件 – 当前页面的样式表文件

    在这里插入图片描述

    7.3 认识小程序中的 4 种配置文件

    JSON 是一种数据格式,在实际开发中,JSON 总是以配置文件的形式出现。小程序项目也不例外,通过不同的 .json 配置文件,可以对小程序项目进行不同级别的配置。小程序项目中有 4 中 json 文件,分别是:

    1. 项目根目录中的 app.json 配置文件 ★★★★★
    2. 项目根目录中的 project.config.json 配置文件
    3. 项目根目录中的 sitemap.json 配置文件
    4. 每个页面文件夹中的 .json 配置文件 ★★★★★

    在这里插入图片描述

    7.4 app.json 文件

    app.json 是当前小程序的全局配置,包括了小程序的所有页面路径窗口外观界面表现底部 tab 等, Demo 项目里面的 app.json 配置内容如下:

    • 全局配置文件就是指配置好以后,能够影响到每一个页面
    • 所有页面路径

    在这里插入图片描述

    简单了解下这 4 个配置项的作用:

    1. pages:用来记录当前小程序所有页面的路径
    2. window:全局定义小程序所有页面的背景色、文件颜色等
    3. style:全局定义小程序组件所使用的样式版本
      • 微信小程序是运行到微信内部的
      • 样式风格和微信是一致的
      • 微信主要样式风格会发生改变,小程序也会随之发生改变
      • 这时候就产生了样式版本的概念
    4. sitemapLocation:用来指明 sitemap.json 的位置
    7.5 project.config.json 文件

    project.config.json 是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置,例如:

    1. setting 中保存了编译相关的配置
    2. projectname 中保存的是项目名称
    3. appid 中保存的是小程序的账号 ID
    7.6 sitemap.json 文件

    在实际开发中,这个文件,默认就可以

    如果需要进行配置,需要按照运营的要求,进行文件的配置

    微信现已开放小程序内搜索,效果类似于 PC 网页的 SEO (搜索引擎优化),sitemap.json 用来配置小程序页面是否允许微信搜索

    当开发者允许微信搜索时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。

    在这里插入图片描述

    注意: sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件 project.config.jsonsetting 中配置字段 checkSiteMapfalse

    7.7 页面的 .json 配置文件

    小程序中的每一个页面,可以使用 .json 文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖 app.json 中的 window 中的配置项

    在这里插入图片描述

    7.8 新建小程序页面
    1. pages 文件中右键 新建文件夹 -- home,在 home 文件夹右键 新建 home -- 输入 hoome
      • 官方推荐文件夹名称和页面的名称一致,方便后期的维护
      • 新建页面组件的时候,不需要输入后缀名
    2. app.json --> pages 中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件
    3. 对 pages 目录下页面的删除或者新增都需要在 app.json 文件的 pages 数组中进行新增或删除

    在这里插入图片描述

    7.9 设置首页的两个方式
    1. 调整 app.json --> pages 数组中页面路径的前后顺序,即可修改项目的首页,小程序会把排在第一位的页面,当作项目首页进行渲染

    在这里插入图片描述

    1. app.jsonpages 同级,配置一个新的节点 entryPagePath 节点,传入需要设置为首页的路径即可
      • 最终小程序项目的首页,以 entryPagePath 节点设置的为准

    在这里插入图片描述

    7.10 WXML 的概念以及和 HTML 之间的区别
    1. 什么是 WXML

      WXMLWeiXin Markup Language)是框架设计的一套标签语言(组件),用来构建小程序页面的结构,其作用类似于网页开发中的 HTML

    2. WXMLHTML 的区别

      • 标签名称不同

        • HTMLdiv、p、span、img
        • WXMLview、text、image、navigator
      • 属性节点不同

        • <a href="#">超链接</a>
        • <navigator url="/pages/home/home"></navigator>
      • 提供了类似于 Vue 中的模板语法

        • 数据绑定 – 插值表达式
        • 列表渲染 – wx:for – v-for
        • 条件渲染 – wx:if – v-if
    7.11 WXSS 的概念以及和 CSS 之间的区别
    1. 什么是 WXSS

      • WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式
      • 类似于网页开发中的 CSS
    2. WXSSCSS 之间的区别

      • 新增了 rpx 自适应尺寸单位

        • CSS 中需要手动进行像素单位换算,例如 rem
        • WXSS 在底层支持新的尺寸单位 rpx,在不同大小的屏幕上小程序会自动进行换算
      • 提供了全局的样式和局部样式

        • 项目根目录中的 app.wxss 会作用于所有小程序页面
        • 局部页面的 .wxss 样式仅对当前页面生效
      • WXSS 仅支持部分 CSS 选择器

        • 重点使用 class 选择器

        • .class 和 #id

        • element

        • 并集选择器和后代选择器

        • ::after 和 ::before 等伪类选择器

    7.12 小程序中 JS 文件的三大分类

    一个项目仅仅提供页面的展示是不够的,在小程序中,我们通过 .js 文件来处理用户的操作,例如:响应用户的点击、获取用户的位置等等

    小程序中的 JS 文件分类三大类,分别是:

    1. app.js

      • 整个小程序项目的入口文件,通过调用 App() 函数 来启动整个小程序
    2. 页面的 .js 文件

      • 页面的入口文件,通过调用 Page() 函数来创建小程序页面,并运行小程序页面
    3. 普通的 .js 文件

      • 普通的功能模块文件,用来封装公共的函数或属性供页面使用

    8. 宿主环境

    8.1 了解宿主环境的概念

    宿主环境指的是 程序运行所必须的依赖环境,例如:

    1. Android 系统和 IOS 系统是两个不同的宿主环境
    2. 安卓版的微信 App 是不能在 IOS 环境下运行的。所以 Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的

    在这里插入图片描述

    8.2 小程序的宿主环境
    1. 小程序的宿主环境

      微信是小程序的宿主环境,如图所示:

    在这里插入图片描述

    小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:微信扫码、微信支付、微信登录、地理定位 等等

    1. 小程序宿主环境包含的内容
      • 通信模型
      • 运行机制
      • 组件 – “标签”
      • API – “方法”
    8.3 小程序的通信主体

    小程序中通信的主体是 渲染层逻辑层,其中:

    1. WXML 模板和 WXSS 样式工作在渲染层
    2. JS 脚本工作在逻辑层

    在这里插入图片描述

    8.4 小程序的通信模型

    小程序中的通信模型分为两个部分

    1. 渲染层逻辑层 之间的通信

      • 由微信客户端进行转发
    2. 逻辑层第三方服务器 之间的通信

      • 由微信客户端进行转发

    在这里插入图片描述

    8.5 运行机制
    1. 小程序启动的过程

      • 把小程序的代码包下载到本地
      • 解析 app.json 全局配置文件
      • 执行 app.js 小程序入口文件,调用 App() 创建小程序实例
      • 渲染小程序首页
      • 小程序启动完成
    2. 页面渲染的过程

      • 加载解析页面的 .json 配置文件
      • 加载页面的 .wxml 模板和 .wxss 样式
      • 执行页面的 .js 文件,调用 Page() 创建页面实例
      • 页面渲染完成

    9. 小程序中的组件

    9.1 了解常用的视图容器组件
    1. 小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构,官方把小程序的组件分为了 9 大类,分别是:

       ① 视图容器    ② 基础内容   ③ 表单组件   ④ 导航组件  ⑤ 媒体组件
      
       ⑥ map 地图组件  ⑦  canvas 画布组件  ⑧ 开发能力  ⑨ 无障碍访问
      
    2. 常用的视图容器类组件

      • view 组件

        • 普通视图区域
        • 类似于 HTML 中的 div ,是一个块级元素
        • 常用来实现页面的布局效果
      • scroll-view 组件

        • 可滚动的视图区域
        • 常用来实现滚动列表效果
      • swiperswiper-item 组件

        • 轮播图容器组件和轮播图 item 组件
    9.2 view 组件的基本使用

    view 类似于 div ,一般主要用来布局

    实现如图的 Flex 横向布局效果:

    在这里插入图片描述

    <view class="container">
      <view>A</view>
      <view>B</view>
      <view>C</view>
    </view>
    
    
    .container {
      display: flex;
      justify-content: space-around;
    }
    
    .container view{
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
    
    .container view:nth-child(1) {
      background-color: lightgreen;
    }
    
    .container view:nth-child(2) {
      background-color: lightskyblue;
    }
    
    .container view:nth-child(3) {
      background-color: lightcoral;
    }
    
    
    
    9.3 scroll-view 组件的基本使用

    在这里插入图片描述

    <!-- scroll-x 属性:允许横向滚动 -->
    <!-- scroll-y 属性:允许纵向滚动 -->
    <!-- 注意:使用竖向滚动时,必须给 scroll-view 一个固定的高度 -->
    <scroll-view class="container" scroll-y>
      <view>A</view>
      <view>B</view>
      <view>C</view>
    </scroll-view>
    
    
    .container {
      width: 100px;
      height: 120px;
    }
    
    .container view{
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
    
    .container view:nth-child(1) {
      background-color: lightgreen;
    }
    
    .container view:nth-child(2) {
      background-color: lightskyblue;
    }
    
    .container view:nth-child(3) {
      background-color: lightcoral;
    }
    
    
    9.4 swiper 和 swiper-item 的基本使用

    在这里插入图片描述

    <!-- 轮播图区域 -->
    <!-- indicator-dots 属性:显示面板指示点 -->
    <swiper indicator-dots class="swiper-container">
      <!-- 第一项 -->
      <swiper-item>
        <view class="item">A</view>
      </swiper-item>
      <!-- 第二项 -->
      <swiper-item>
        <view class="item">B</view>
      </swiper-item>
      <!-- 第三项 -->
      <swiper-item>
        <view class="item">C</view>
      </swiper-item>
    </swiper>
    
    .swiper-container {
      /* 轮播图容器的高度 */
      height: 150px;
    }
    
    .item{
      height: 100%;
      line-height: 150px;
      text-align: center;
    }
    
    swiper-item:nth-child(1) .item{
      background-color: lightgreen;
    }
    
    swiper-item:nth-child(2) .item{
      background-color: lightskyblue;
    }
    
    swiper-item:nth-child(3) .item{
      background-color: lightcoral;
    }
    
    
    9.5 swiper 组件的常用属性
    属性类型默认值说明
    indicator-dotsbooleanfalse是否显示面板指示点
    indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色
    indicator-active-colorcolor#000000当前选中的指示点颜色
    autoplaybooleanfalse是否自动切换
    intervalnumber5000自动切换时间间隔
    circularbooleanfalse是否采用衔接滑动
    9.6 text 和 rich-text 组件
    1. 常用的基础内容组件

      • text 组件

        • 文本组件
        • 类似于 HTML 中的 span 标签,是一个行内元素
      • rich-text 组件 (v-html)

        • 富文本组件
        • 支持把 HTML 字符串渲染为 WXML 结构
        • 富文本编辑器,生成 HTML字符串然后保存到数据中,如果 HTML 字符串需要渲染到小程序中
        • 小程序不支持 HTML,就使用 rich-text 将 HTML 字符串进行解析和渲染
    2. text 组件的基本使用

      • 通过 text 组件的 selectable 属性,实现长按选中文本内容的效果
      <!-- 常用的基础内容组件 text 和 rich-text 的用法 -->
      <view>
        手机号支持长按选中效果
        <text selectable>18222222222</text>
      </view>
      
    3. rich-text 组件的基本使用

      • 通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构
      <!-- 应用场景 -->
      <rich-text nodes="<h4 style='color: red'>rich-text组件</h4>"></rich-text>
      
    9.7 button 按钮组件
    1. 常用的其他组件

      • button

        • 按钮组件
        • 功能比 HTML 中的 button 按钮丰富
        • 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
    2. button 按钮的基本使用

      属性名类型默认值说明
      sizeStringdefault按钮的大小
      typeStringdefault按钮的样式类型
      plainBooleanfalse按钮是否镂空,背景色透明
      disabledBooleanfalse是否禁用
      loadingBooleanfalse名称是否带 loading t图标
    <view>~~~ 通过 type 指定按钮类型 ~~~</view>
    
    <button>默认按钮</button>
    <button type="primary">主色调按钮</button>
    <button type="warn">警告按钮</button>
    
    <view>~~~ size="mini" 小尺寸按钮 ~~~</view>
    
    <button size="mini">默认按钮</button>
    <button size="mini" type="primary">主色调按钮</button>
    <button size="mini" type="warn">警告按钮</button>
    
    <view>~~~ plain 镂空效果 ~~~</view>
    
    <button plain size="mini">默认按钮</button>
    <button plain size="mini" type="primary">主色调按钮</button>
    <button plain size="mini" type="warn">警告按钮</button>
    
    
    9.8 image 图片组件
    1. image 组件的基本使用

      • src – 支持本地和网络上的图片
      • mode – 指定图片的裁剪、缩放的模式
      <!-- 1. 空图片 -->
      <image></image>
      
      <!-- 2. 使用 src 指向图片路径 -->
      <image src="/images/ha.jpg"></image>
      
      
      image {
        border: 1px solid red;
      }
      
    2. image 组件的 mode 属性

      image 组件的 mode 属性用来指定图片的裁剪和缩放模式。常用的 mode 属性值如下:

      mode 值说明
      scaleToFill默认值,缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
      aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
      aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
      widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变,这里的宽度是指 image 宽度,不在是默认值
      heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变,这里的高度是指 image 高度,不在是默认值
    9.9 小程序 API 的 3 大分类

    小程序中的 API 是宿主环境提供的,通过这些丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。小程序官方把 API 分为如下 3 大类:

    1. 事件监听 API

      • 特点:以 on 开头的 API 用来监听某个事件是否触发
      • 举例:wx.onWindowResize(function callback)
    2. 同步 API

      • 特点1:以 Sync 结尾的 API 都是同步 API
      • 特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
      • 举 例:wx.setStorageSync(‘key’, value) 向本地存储中写入内容
    3. 异步 API

      • 特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调用结果

      • 举例:wx.request() 发起网络数据请求,通过 success 回调函数接收数据

      • 小程序中,大多数的 API 都是异步 API

    10. 协同工作(成员管理)

    10.1 了解权限管理需求、组织结构、开发流程
    1. 了解权限管理需求

      • 在中大型的公司中,人员的分工非常仔细:同一个小程序项目,一般会有不同的岗位、不同角色的员工同时参与设计与开发
      • 此时出于管理需要,我们迫切需要对不同的岗位、不同的角色的员工的权限进行边界的划分,使他们能够高效的进行协同开发
    2. 了解项目成员的组织结构

      在这里插入图片描述

    3. 小程序的开发流程

      在这里插入图片描述

    10.2 了解小程序成员管理的两个方面

    小程序成员管理体现在 管理员 对小程序 项目成员体验成员 的管理:

    1. 项目成员

      • 表示参与小程序开发、运营的成员
      • 可登陆小程序管理后台(微信公众平台)
      • 管理员可以添加、删除项目成员,并设置项目成员的角色
    2. 体验成员

      • 表示参与小程序内测体验的成员
      • 可使用体验版小程序,但不属于项目成员
      • 管理员及项目成员均可添加、删除体验成员
    10.3 开发者的权限说明
    1. 不同项目成员对应的权限

      • 项目成员分为三个角色: 运营成员、开发人员、数据分析者

      在这里插入图片描述

    2. 开发者的权限说明

      • 开发者权限:可使用小程序开发者工具及对小程序的功能进行代码管理
      • 体验者权限:可使用体验版小程序
      • 登录权限:可登录小程序的后台管理,无需要管理员确认
      • 开发设置:设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序
      • 腾讯云管理:云开发相关设置
    10.4 了解如何添加项目成员和体验成员

    11. 小程序的发布

    11.1 了解小程序的版本阶段
    1. 软件开发过程中,根据时间节点的不同,会产出不同的软件版本

      • 开发版本:开发者编写代码的同时,对项目代码进行自测
      • 体验版本:直到程序达到一个稳定可靠,可体验的状态时,开发者把体验版本给到产品经理和测试人员进行体验测试
      • 正式版本:最后修复完程序的 bug 后,发布正式版供外部用户使用
    2. 小程序的版本

      在这里插入图片描述

    审核是微信官方进行审核,审核周期一般是 3 ~ 7 天

    11.2 了解小程序发布上线的主要步骤
    1. 小程序发布上线 的整体步骤

      一个小程序的发布上线,一般要经过 上传代码 --> 提交审核 --> 发布 这三个步骤

    2. 上传代码

      • 点击开发者工具顶部工具栏中的“上传”按钮
      • 填写版本号以及项目备注

    3. 在后台查看上传之后的版本

      登录小程序管理后台 --> 管理 --> 版本管理 --> 开发版本,即可查看刚才提交上传的版本

    4. 提交审核

      • 为什么需要提交审核

        • 为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过腾讯官方审核的
      • 提交审核的方式

        • 在开发版本的列表中,点击 提交审核 按钮之后,按照页面提示填写相关的信息,就能把小程序提交到腾讯官方进行审核
    5. 发布

      审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时在审核版本的列表中,点击 发布 按钮之后,即可把 审核通过 的版本发布为 线上版本,供所有小程序用户访问和使用

    11.3 基于小程序码进行推广
    1. 相对于普通二维码来说,小程序码的优势如下:

      • 在样式上更具有辨识度和视觉冲击力
      • 能够更加清晰的树立小程序的品牌形象
      • 可以帮助开发者、商家更好的推广小程序
    2. 获取小程序码的 5 个步骤:

      登录小程序管理后台 --> 设置 --> 基本设置 --> 基本信息 --> 小程序码及线下物料下载

    11.4 查看小程序的运营数据
    1. 小程序后台 查看

      • 登录小程序管理后台
      • 点击侧边栏的 “统计”
      • 点击相应的 tab 可以看到相关的数据
    2. 使用 小程序数据助手 查看

      • 打开微信
      • 搜索 “小程序数据助手”
      • 查看已发布的小程序相关的数据

    如有不足,请多指教,
    未完待续,持续更新!
    大家一起进步!

    展开全文
  • 微信小程序商城(前端篇)

    万次阅读 多人点赞 2018-12-18 17:58:36
    本文档是基于本人第一次接触小程序的全过程学习步骤 步骤1: 可参见小程序官方简易教程:https://developers.weixin.qq.com/miniprogram/dev/ 以下描述是基于上述教程的基础上实际上手内容 步骤2: 1、申请账号...

    本文档是基于本人第一次接触小程序的全过程学习步骤

    步骤1:

    可参见小程序官方简易教程:https://developers.weixin.qq.com/miniprogram/dev/

    以下描述是基于上述教程的基础上实际上手内容

    步骤2:

    1、申请账号,根据指引申请账号之后获得开发者id

    2、安装开发工具,根据教程指引下载安装

    步骤3:新建项目:打开微信web开发者工具——选择小程序项目——选择一个空目录(也可直接选择一个项目打开,此处基于第一次新建项目)——AppID填写第一天获取到的开发者id——填写项目名称——若项目目录是空文件夹,则会显示下图第四点,一般选择普通快速启动模板



    步骤4:代码构成,新建完一个快速模板之后,会生成如下文件:

    1、app.json :

    微信客户端在打开小程序之前,会把整个小程序的代码包下载到本地,app.json 的 pages 字段可以知道所有页面路径,于是微信客户端就把页面的代码装载进来,通过小程序底层的一些机制,就可以渲染出这个页面。

    关于app.json描述:

    //当前小程序的全局配置,包含所有页面路径、界面表现、网络超时时间、底部tab等
    {
      //pages :用于描述当前小程序所有页面路径,用于指定小程序有哪些页面组成,每一项都对应一个页面的 路径+文件名 文件名不需要写后缀  框架会自动去寻找 对应位置的 4个文件 .json .js  .wxml  .wxss 进行处理
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      // window:全局默认窗口的表现,定义所有页面的顶部背景颜色,文字颜色等 
      "window":{
        //下拉 loading 的样式,仅支持 dark / light
        "backgroundTextStyle":"light",
        //导航栏背景颜色
        "navigationBarBackgroundColor": "#37383c",
        //导航连标题内容
        "navigationBarTitleText": "大喵的小店",
        //导航栏标题颜色
        "navigationBarTextStyle":"ffffff",
        //窗口背景色
        "backgroundColor": "#eeeeee",
        //是否开启当前页面的下拉刷新
        "enablePullDownRefresh": true
      },
      //底部tab栏目的表现
        "tabBar": {
          //tab 上的文字默认颜色,仅支持十六进制颜色
          "color": "#b7b7b7",
          //tab 上的文字选中时的颜色,仅支持十六进制颜色
          "selectedColor": "#AB956D",
          //tabbar上边框的颜色
          "borderStyle": "#f5f5f5",
          //tab 的背景色,仅支持十六进制颜色
          "backgroundColor": "#f5f5f5",
          //tab 的列表,最少2个、最多5个 tab
          "list": [
            {
              //页面路径,必须在 pages 中先定义
              "pagePath": "page/component/index",
              //图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon
              "iconPath": "image/12.png",
              //选中时的图片路径
              "selectedIconPath": "image/11.png",
              //tab 上按钮文字
              "text": "首页"
            },
            {
              "pagePath": "page/component/category/category",
              "iconPath": "image/22.png",
              "selectedIconPath": "image/21.png",
              "text": "分类"
            },
            {
              "pagePath": "page/component/cart/cart",
              "iconPath": "image/32.png",
              "selectedIconPath": "image/31.png",
              "text": "购物车"
            },
            {
              "pagePath": "page/component/user/user",
              "iconPath": "image/42.png",
              "selectedIconPath": "image/41.png",
              "text": "我的"
            }
          ]
        },
        //网络超时时间
          "networkTimeout": {
            "request": 10000,
            "connectSocket": 10000,
            "uploadFile": 10000,
            "downloadFile": 10000
          },
          //是否开启debug模式,默认是关闭的
          "debug": false
    }
    

    2、小程序启动之后,在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

    //app.js
    App({
      onLaunch: function () {
        //调用API从本地缓存中获取数据
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
      },
      getUserInfo:function(cb){
        var that = this
        if(this.globalData.userInfo){
          typeof cb == "function" && cb(this.globalData.userInfo)
        }else{
          //调用登录接口
          wx.login({
            success: function () {
              wx.getUserInfo({
                success: function (res) {
                  that.globalData.userInfo = res.userInfo
                  typeof cb == "function" && cb(that.globalData.userInfo)
                }
              })
            }
          })
        }
      },
      globalData:{
        userInfo:null
      }
    })

     

    3、pages文件夹下面都是一个个的页面,一般新建项目之后pages下会有一个index文件夹里面包含4个文件,分别是:index.js,index.json,index.wxml,index.wss,即,每个页面都是有这四个文件组成的,index是首页,新建页面可以自定义,所有页面都需要在app.json的pages字段中描述,如下图:

    步骤5:新建页面,以及页面各个文件描述,以下描述index页面,以及user页面

    1、新建页面:

    2、index页面详解:index.js,index.json,index.wxml,index.wss

    • 关于首页底部tab栏目的表现、窗口背景色、导航栏的配置请详见步骤4,app.json中的描述
    • 网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。在小程序中也有同样的角色,其中 WXML 充当的就是 HTML 的角色,wss充当的就是CSS的角色
    • index.js:
    1. 页面初始化:
      data是页面初始数据,onLoad生命周期回调—监听页面加载,类似还有onShowonReadyonHide
    • 一个服务除界面展示,还需要和用户做交互:响应用户的点击、获取用户的位置等等。通过编写 JS 脚本文件来处理用户的操作例如:

    标签切换:
    js代码:
     
    对应的wxml代码:


    跳转至详情页:点击图片或者文字页面跳转
    js代码:

    对应的wxml代码:

    • index.wxml:描述当前这个页面的结构,采用MVVM 的开发模式,js只需要管理状态
    • index.wss:WXSS 用来决定 WXML 的组件应该怎么显示:


    • user页面:

      js:
      //index.js
      //获取应用实例
      var app = getApp()
      var myData = require('../../utils/data')
      var util = require('../../utils/util')
      
      Page({
        // 页面初始数据
        data: {
      
        },
        // 地址编辑
        editAddr : function(e){
          console.log(e)
          wx.navigateTo({
            url:'../edit_addr/edit_addr?addrid='+e.currentTarget.dataset.addrid
          })
        },
        onLoad() {
          var self = this;
          /**
           * 获取用户信息
           */
          // wx.getUserInfo({
          //   success: function (res) {
          //     self.setData({
          //       thumb: res.userInfo.avatarUrl,
          //       nickname: res.userInfo.nickName
          //     })
          //   }
          // })
        }
      })
      

      wxml:
       

      <!--user.wxml-->
      
      <view class="container">
        <view class="user_base_info">
          <view class="user_avatar">
              <!-- <image src="{{thumb}}" class="thumb"></image>   -->
              <open-data type="userAvatarUrl"></open-data>     
          </view>
          <view class="user_info">
            <text>
              昵称:
            </text>
            <open-data type="userNickName" lang="zh_CN"></open-data> 
          </view>
        </view>
      
       <view class="user_addr_manage">
          <view class="user_addr_title">【地址管理】</view>
          <block wx:for="{{addrDate}}" wx:key="item.id">
            <view class="user_addr_item">
                <text class="addr_sub">{{item}}</text>
                <view class="addr_edit" bindtap="editAddr" data-addrid="{{index+1}}"></view>
            </view> 
          </block>
          <navigator url="../edit_addr/edit_addr" >新增地址 +</navigator>
       </view>
        
      </view>

      获取用户信息:最开始我用的wx.getUserInfo,但是小程序目前在测试版和体验版限制通过wx.getUserInfo({})获取弹出授权框。


       

      <open-data type="groupName" open-gid="xxxxxx"></open-data>
      <open-data type="userAvatarUrl"></open-data>
      <open-data type="userGender" lang="zh_CN"></open-data>

       

    如需完整项目源码请联系我,后续会更后端篇。。。>_<

     

    展开全文
  • h5网页跳转小程序

    千次阅读 2020-08-18 10:13:58
    这两天遇到一个需求,需要从H5网页跳转到小程序,查了一下文档,微信官方前段时间正好发布了一个 网页开放标签 wx-open-launch-weapp, 现在这个标签支持的环境是微信环境,注意,外部浏览器不支持。 这是文档入口 ...

    这两天遇到一个需求,需要从H5网页跳转到小程序,查了一下文档,微信官方前段时间正好发布了一个 网页开放标签 wx-open-launch-weapp,

    现在这个标签支持的环境是微信环境,注意,外部浏览器不支持。

    这是文档入口 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

    直接上代码

    在这里插入图片描述

    在这里插入图片描述

    需要注意一下,wx.config 中,jsApiList中 openTagList 必须要有,否则跳转不过去(在我这里是这样的)

    html文件中, template不能少。我这边,在开发者工具中,按钮没有显示,但是真机扫码,在手机上按钮是出现的。

    最后一点,详细看文档。

    展开全文
  • 新手前端微信小程序img图片无法显示问题

    万次阅读 多人点赞 2019-02-28 11:30:19
    最近自己在做毕设,是一个微信小程序,虽然自己有一点前端开发经验,以为小程序前端和这个差不多可以直接开撸,但是这两天被一些图片问题烦了好久。 这也是自己第一次写博客,实在太生气了,网上也没找到自己想要的...
  • 从微信小程序前端代码安全

    万次阅读 2018-01-06 15:48:15
    起初在研究对移动网络传输进行功耗优化,在一次意外的监听网络传输包中截获了微信小程序的请求包,借此来窥探当下前端代码安全。 0x01 小程序分析 小程序包结构 Segment Name Length ...
  • 微信‘小程序’: web前端的春天 or 噩梦?

    万次阅读 多人点赞 2016-09-26 10:05:51
    最近大家看到这张图是不是都快吐了?这两天一睁眼就被这张图刷屏了 喵了咪的,点到哪里都是这个报道和新闻 ...* 只通过技术角度分析讨论 【小程序】对程序员、web前端、后端人员技术路线的影响 * 不从产品角度 展
  • 微信小程序转钉钉小程序适配问题

    千次阅读 2020-07-16 00:13:12
    与阿里云项目合作,作为ISV,不能使用腾讯系产品,必须将微信小程序项目成钉钉小程序。 经过12天的艰苦奋斗,基本完成。将经验教训整理一下给大家。 不支持wxs,无法自定义页面函数 很方便的{{mc.todate(addtimes,...
  • 两者有很大的相似性,对于前端开发者而言,从网页开发迁移到小程序的开发成本并不高,但是二者还是有些许区别的。   区别之一:运行环境不同   网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的...
  • 小程序从入门到快速开发小程序项目

    万次阅读 多人点赞 2018-08-19 21:39:39
    备注:小程序只是突发灵感兴趣弄的,并非专业研究小程序,其实小程序API并不多,不复杂,扩展无非就是JS了。 最近用了大概两天左右的时间看了小程序的官方文档:https://mp.weixin.qq.com/cgi-bin/wx 然后有目标的...
  • 微信小程序基础知识: (1)手机的屏幕宽度的最大为750rpx(数据与rpx连写); (2) .wxml语法 <text></text> 文本标签 属性说明: <view></view> 布局块标签(最常用标签) 属性说明:...
  • 作为一个第一批小程序的开发者,从小程序内测之初通过开发工具破解版开始尝试小程序,见证了小程序官方文档的每一次更新,踩过小程序的大多数坑,也见证了好几个小程序社区的逐步发展,到最终把自己的小程序过审上线...
  • 我司也不例外,我们整个前端团队这半年来基本上都是在开发小程序。前前后后也开发了四五个小程序了。总觉得要留下点什么,既是记录那些年我们踩过的坑,也是希望大家别再掉坑。 那些年我们踩过的坑 css样式不能...
  • Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。随着人们对用户体验的要求越来越高,前端开发的技术难度越来越大,Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。 早期的前端...
  • 微信小程序html格式转换详解

    千次阅读 多人点赞 2020-05-25 13:30:34
    在毕设的过程中,把项目迁移到小程序中,遇到了html格式的博客内容,在小程序中直接以标签的格式显示出来了,并没有进行标签格式的转换,因此记下该问题并解决。问题的截图如下: 解决步骤 首先要先下载wxParse:...
  • 10分钟入门 - 微信小程序开发

    万次阅读 多人点赞 2019-01-09 21:33:14
    注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...
  • Web前端_微信小程序实战开发

    千次阅读 2019-07-17 17:34:00
    微信小程序开发实战教程 一、微信小程序 它是一种混合开发的方式。 是安装在微信中的程序(一个程序最多2M空间)。 1.1注册 1 2点击立即注册:进入下方页面 3 4点击小程序进入表单填写页面 5 6...
  • () 两天快速开发一个自己的微信小程序

    万次阅读 多人点赞 2018-04-22 21:59:54
     对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。 2.先放上我做的小程序可以在微信小程序搜索“悬笔e绝”,或者用微信扫描下面的二维码哦...
  • 本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序。 并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js...
  • 首先,需要在你的html页面中引用一个js文件。 &lt;script type="text/javascript" src="...&...然后为你的按钮标签注册一个点击事件:  $(".kaiqi").click(function(){  wx....
  • 前言3 个月前,微信小程序推出了 web-view 组件引发了一波小高潮,笔者所在的大前端团队写过一篇浅析,详情可见:浅谈微信小程序前端生态。我们曾大胆猜想,这一功能,可能直接导致小程序数量增长迎来一波高峰。毕竟...
  • 如何学习微信小程序? 学习微信小程序所需基础

    万次阅读 多人点赞 2020-03-30 16:23:19
    小程序是一种新的开放能力,开发者可以快速地开发一个小程序小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 说的通俗一些,微信小程序就是微信中非常小巧的程序(这不废话......),我们打开...
  • 最近有一个需求,在web页面上有一个按钮,点击按钮,调起本地的.exe程序客户端,我在网上找了很多,感觉都不完整,所以自己总结写一下。 效果图 主要实现方式是添加注册表; 新建一个qq.txt文本文档(ps:文件名字...
  • mpvue将vue项目转换为小程序

    千次阅读 2019-02-28 16:44:04
    mpvue:是由 美团点评团队出品的小程序开 发的一款基于 vue的框架, 从整个 Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发微信小程序的能力。 使用 mpvue开发小程序,你将在...
  • 天猫网页前端实现

    千次阅读 多人点赞 2019-05-10 16:47:23
    学习了jQuery和boostrap4的教程,苦于没有项目练手,于是决定模仿天猫网页,纯前端实现。 首先先把天猫网页规划一下,大致可以分为: 公共页面 首页 每一部分逐步完成,最后整合在一起。 公共页面 公共页面就是每...
  • 微信小程序跳转到第三方H5网页

    千次阅读 2020-12-20 16:42:23
    我开发过程中有小程序跳转到网页的需求,下面分享一下我的实现过程: 使用官方文档web-view组件:web-view 1、首先得通过微信公众平台配置业务域名,配置业务域名需要将校验文件上传到网站服务器根目录下。 步骤一:...
  • 最近在做项目的时候,遇到了一个需求,是需要前端打开本地安装的exe客户端软件,并且需要传参数,进行客户端免密登陆。刚开始碰到这个需求的时候,一脸茫然,不知道怎么做,...参考文档: 用网页打开本地exe程序. ...
  • 小程序与普通网页开发的区别

    千次阅读 2021-01-18 14:45:34
    我们平时写的微信小程序,明明只写了一套代码,为什么小程序可以在安卓的微信里面运行,也可以在...小程序与普通网页开发的区别:链接 微信会将基础组件渲染为原生平台UI组件,意味着每个视图和原生应用都别无二致。 .
  • 《URL Scheme打开小程序》 2. 《获取 access_token》 请求地址 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 请求参数 属性 类型 默认值...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,562
精华内容 14,624
关键字:

网页标签转小程序前端