微信小程序开发_微信小程序云开发,在群消息中点击微信小程序获取微信群信息 - CSDN
精华内容
参与话题
  • 本课程是以我三年多微信小程序开发的经验分享,目标是带你能快速入门,并能学习到最核心和实用的开发技能。课程以2020年3月份目前最新的,微信小程序开发规范作为指导,以"小象壁纸"小程序作为讲解案例,将相关知识...
  • 10分钟入门 - 微信小程序开发

    万次阅读 多人点赞 2019-05-29 13:12:55
    注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...

    注册微信小程序

    如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。

    接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序。

    激活邮箱之后,选择主体类型为 “个人类型”,并按要求登记主体信息。主体信息提交后不可修改,该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体,在后续开通其他业务功能时不得变更或修改。

    在这里插入图片描述

    一切 OK 就可以直接进入小程序的管理平台了。如果直接跳转失败,也可以从微信公众平台上手动登录。填写小程序的基本信息,包括名称、图标、描述等。提交成功之后,再添加开发者。开发者默认为管理员,我们也可以从这里新增绑定开发者,这是管理员才有权限的操作。

    然后在左侧导航栏点击 “设置”,找到开发设置,获得小程序的 AppID。

    微信开发者工具

    下载微信web开发者工具,根据自己的操作系统下载对应的安装包进行安装即可。

    打开开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

    第一个小程序

    新建项目

    打开开发者工具,选择 “小程序项目”,点击右下角的 “+” 新建项目。

    选择一个空的文件夹作为项目目录,填入刚刚的 AppID,再填写一个项目名称,比如我这里叫做 GoZeroWaster。点击 “确定” 进入工具主界面。

    项目目录结构

    微信小程序的基本文件构造和项目目录结构说明如下:

        .
        ├── app.js     # 小程序的逻辑文件
        ├── app.json   # 小程序的配置文件
        ├── app.wxss   # 全局公共样式文件
        ├── pages      # 存放小程序的各个页面
        │   ├── index  # index页面
        │   │   ├── index.js     # 页面逻辑
        │   │   ├── index.wxml   # 页面结构
        │   │   └── index.wxss   # 页面样式表
        │   └── logs   # logs页面
        │       ├── logs.js      # 页面逻辑
        │       ├── logs.json    # 页面配置
        │       ├── logs.wxml    # 页面结构
        │       └── logs.wxss    # 页面样式表
        ├── project.config.json
        └── utils
            └── util.js
    

    根目录下有3个文件:app.js、app.json、app.wxss,小程序必须有这3个描述 APP 的文件,并放在根目录下。这3个是应用程序级别的文件,与之平行的还有一个 pages 文件夹,用来存放小程序的各个页面。

    我们可以和 web 前端开发技术做个类比:

    • wxml 类似于 HTML 文件,用来编写页面的标签和骨架,但里面只能用小程序自己封装的组件;
    • wxss 类似于 CSS 文件,用来编写页面样式,只是把 css 文件换成了 wxss 文件;
    • js 文件类似于前端编程中的 JavaScript 文件,用来编写小程序的页面逻辑;
    • json 文件用来配置页面的样式和行为。

    目标成果

    我们先来看看最终的目标和成果,很简单,一共两页:

    在这里插入图片描述

    (为了让广大程序员也能保护环境和热爱生活,我特意选了 “零垃圾生活” 主题来做 Demo)

    步骤分解

    Demo 代码下载:https://gitee.com/luhuadong/Web_Learning/tree/master/WeChat/GoZeroWaster

    分解目标成果:

    1. 个人中心
    2. 生活指南
    3. 模拟弹窗
    4. 预览图片

    页头页尾

    在目标成果预览中我们看到,两个页面都有共同的部分 —— 页头和页尾。所以在构建页面内容之前,我们先把页头和页尾处理好。我们很容易猜到,这两部分属于小程序的全局配置,因此需要修改 app.json 文件。

    最初的内容如下:

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

    pages 属性用来设置页面路径,它是一个数组,每一项都是字符串来指定小程序由哪些页面组成。数组的第一项代表小程序的初始页面。小程序中新增或减少页面,都需要对 pages 数组进行修改。

    window 属性用于设置小程序的状态栏、导航条、标题、窗口背景色。

    我们把页头的标题和颜色修改一下,页尾部分我们做一个 tab 栏来切换页面,这个属性叫做 tabBar,代码如下:

    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#2f2f8f",
        "navigationBarTitleText": "GoZeroWaste",
        "navigationBarTextStyle":"white"
      },
      "tabBar":{
        "color": "#bfc1ab",
        "selectedColor": "#13b11c",
        "backgroundColor": "#1f1f4f",
        "list": [
          {
            "pagePath": "pages/index/index",
            "iconPath": "image/icon_component.png",
            "selectedIconPath": "image/icon_component_HL.png",
            "text": "个人中心"
          },
          {
            "pagePath": "pages/details/details",
            "iconPath": "image/icon_API.png",
            "selectedIconPath": "image/icon_API_HL.png",
            "text": "生活指南"
          }
        ]
      }
    }
    

    (所用到的图片放在项目的 image 目录,你也可以使用自己的图片)

    这里用到几个 tabBar 的属性是 color、selectedColor、backgroundColor 和 list,list 是一个数组,主要用于设定导航的路径。

    CTRL + S 保存之后,模拟器就会自动刷新,马上可以看到效果。

    个人中心

    在这里插入图片描述

    简单起见,我们就在 pages/index 目录下实现 “个人中心” 页面好了。双击打开 index.wxml,初始内容如下:

        <!--index.wxml-->
        <view class="container">
          <view class="userinfo">
            <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
            <block wx:else>
              <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
              <text class="userinfo-nickname">{{userInfo.nickName}}</text>
            </block>
          </view>
          <view class="usermotto">
            <text class="user-motto">{{motto}}</text>
          </view>
        </view>
    

    这里已经有一些代码了,虽然现在可能还看不懂,但我们知道,这就是现在页面的源代码。我们把 “Hello World” 部分注释掉,增加我们希望显示的内容:

    <!--index.wxml-->
    <view class="container">
      <view class="userinfo">
        <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
      </view>
       <!-- <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>  -->
      <view class="ID_Badge">
        <view>
          <text class="ID_info">{{company}}</text>
        </view>
        <view>
          <text class='ID_info'>{{position}}</text>
        </view>
        <view>
          <text class='ID_info'>{{lesson}}</text>
        </view>
      </view>
    </view>
    

    这里分别使用 {{company}}{{position}}{{lesson}} 作为占位符,用法类似于 Django 的模板语言。当然也可以直接用相应的字符来替换它,只不过我们想沿用 {{motto}} 的做法,让你知道在哪里修改这些数据。没错,就是在 index.js 文件:

    Page({
      data: {
        motto: 'Hello World',
        company: "GoZeroWaste",
        lesson: "21天零垃圾生活指南",
        position: "垃圾魔法师",
        /* ... */
      },
    

    wxml 文件中的 <view> 组件类似于网页开发中的 <div>,而 <text> 组件是用来写文本的,需要注意的是 <text/> 组件内只支持 <text/> 嵌套。当然,可用用 <image> 插入图片,图片要保存到 image 目录,否则在测试的时候是无法上传的。

        <view class="ID_Badge">
            <!-- 省略 -->
            <view>
              <text class='ID_info'>{{lesson}}</text>
            </view>
            <view>
              <image class='pic' mode='widthFix' src='../../image/GoZeroWaste.jpg'></image>
            </view>
          </view>
    

    mode=‘widthFix’ 表示以宽度不变,高度自动变化,保持原图宽高比不变的方式进行缩放以适应屏幕大小。

    接下来还需要修改 index.wxss 文件来设置样式:

    /**index.wxss**/
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 200px;
    }
    
    .ID_Badge {
      padding-top: 20rpx;
      color: blue;
    }
    
    .ID_info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .pics {
      width: 400rpx;
    }
    

    保存刷新,“个人中心” 页面就完成了。

    生活指南

    在这里插入图片描述

    原来的项目中 pages 目录下只有 index 和 logs 两个目录,因此我们还需要为第二个页面创建一个目录。

    创建页面有两种方法:

    • 在目录结构的 pages 图表上,新建目录,然后在目录下逐一创建页面构成文件
    • 在 app.json 下,直接添加

    建议采用第二种方法,修改 app.json 文件:

        {
          "pages":[
            "pages/index/index",
            "pages/logs/logs",
            "pages/details/details"
          ],
    

    保存刷新之后就会发现,目录结构里自动创建了这一页。对应的,也要修改 app.json 中的 tabBar 的链接(实际上我们已经做了):

        	{
                "pagePath": "pages/details/details",
                "iconPath": "image/icon_API.png",
                "selectedIconPath": "image/icon_API_HL.png",
                "text": "生活指南"
            }
    

    然后修改 details.wxml 设置这一页的标题:

        <!--pages/details/details.wxml-->
        <view>
          <view class='title'>
            <text>21天零垃圾生活指南</text>
          </view>
        </view>
    

    修改 details.wxss 设置样式:

        /* pages/details/details.wxss */
        .title {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 40rpx;
          margin-bottom: 40rpx;
          font-size: 40rpx;
        }
    

    这个页面是一个列表展示的页面,我们先在 details.js 文件中准备好数据:

    // pages/details/details.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        showModalStatus: false,
        list: [
          {
            id: 0,
            name : "写一篇《垃圾日记》",
            introduce: "零垃圾并不是一项宏大的工程,而是由日常生活中一个个小小的习惯和选择组成的。最难的,是迈出第一步。",
            src: '../../image/day01.jpg',
            showModalStatus: false,
            catalog: [
              { section: "1. xxx" },
              { section: "2. xxx" },
              { section: "3. xxx" },
              { section: "4. xxx" },
            ]
          },
          {
            id: 1,
            name: "带上自己的购物袋",
            introduce: "在我们家,当时垃圾桶里最多的就是塑料袋,而这些袋子跟着我回家后,都几乎难逃被丢进垃圾桶的命运。",
            src: '../../image/day02.jpg',
            showModalStatus: false,
            catalog: [
              { section: "1. xxx" },
              { section: "2. xxx" },
              { section: "3. xxx" },
              { section: "4. xxx" },
            ]
          },
          /* 省略 */
        ]
      },
    

    接下来我们要使用列表渲染(wx:for)的方法将这些数据绑定一个数组,并在页面上重复渲染。修改 details.wxml 文件:

          <view>
            <view wx:for="{{list}}" wx:key="id" >
              <view class="lesson" id="{{item.id}}">
                <image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image>
                <view class="lessonName">{{item.name}}</view>
                <view class="lessonIntroduce">{{item.introduce}}</view>
              </view>
            </view>
          </view>
    

    默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。

    修改 details.wxss 文件添加样式:

        .lesson {
          height: 190rpx;
          padding-left: 20rpx;
        }
        
        .lessonPic {
          position: absolute;
          height: 150rpx;
          width: 150rpx;
        }
        
        .lessonName {
          position: absolute;
          margin-left: 220rpx;
          font-size: 35rpx;
        }
        
        .lessonIntroduce {
          position: absolute;
          margin-left: 220rpx;
          margin-top: 60rpx;
          margin-right: 20rpx;
          color: rgb(185, 161, 161);
          font-size: 28rpx;
        }
    

    好啦,第二个页面也完成了。

    模拟弹窗

    在这里插入图片描述

    接下来我们要在 “生活指南” 页面模拟一个弹窗的效果,正常的时候不显示,只有在点击的时候才出现,摁下面的 “确定” 就会消失。

    完了实现这个功能,我们要在组件中绑定一个事件处理函数 bindtap,点击该组件的时候,小程序会在该页面对应的 Page 中找到相应的事件处理函数。

    我们先在 details.js 中为每一列数据里引入一个 boolean 变量 showModalStatus 来描述对应的弹窗状态,并且初始值为 false,表示不显示。同时外层也增加一个初始值为 false 的 showModalStatus 变量实现遮罩效果。如下:

           data: {
            showModalStatus: false,
            list: [
              {
                id: 0,
                name : "写一篇《垃圾日记》",
                introduce: "零垃圾并不是一项宏大的工程,而是由日常生活中一个个小小的习惯和选择组成的。最难的,是迈出第一步。",
                src: '../../image/day01.jpg',
                showModalStatus: false,
                catalog: [
                  { section: "1. xxx" },
                  { section: "2. xxx" },
                  { section: "3. xxx" },
                  { section: "4. xxx" },
                ]
              },
    

    然后在 details.wxml 中插入弹窗,并用条件渲染(wx:if)来判断是否渲染(显示)弹窗。同时为每一个 item 添加 data-statu 来表示弹窗的状态。如下:

      <view>
        <view wx:for="{{list}}" wx:key="id" >
          <view class="lesson" bindtap='powerDrawer' data-statu='open' id="{{item.id}}">
            <image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image>
            <view class="lessonName">{{item.name}}</view>
            <view class="lessonIntroduce">{{item.introduce}}</view>
          </view>
            
          <!-- 弹窗 -->
          <view class='drawer_box' wx:if='{{item.showModalStatus}}' id='{{item.id}}'>
            <view class="title">{{item.name}}</view>
            <view class='drawer_content'>
              <view class='title' wx:for='{{item.catalog}}' wx:for-item='catalog' wx:key='id'>
                {{catalog.section}}
              </view>
            </view>
            <!-- 确定按钮 -->
            <view class='btn_ok' bindtap='powerDrawer' data-statu='close' id='{{item.id}}'>确定</view>
          </view>
        </view>
          
        <!-- 遮罩层 -->
        <view class='drawer_screen' data-statu='close' wx:if='{{showModalStatus}}'></view>
      </view>
    

    在 details.js 添加 powerDrawer 事件处理,包括显示和关闭事件:

          powerDrawer: function (e) {
            console.log("clicked");
        
            var currentStatu = e.currentTarget.dataset.statu;
            var index = e.currentTarget.id;
        
            // 关闭
            if (currentStatu == 'close') {
              this.data.list[index].showModalStatus = false;
              this.setData({
                showModalStatus: false,
                list: this.data.list,
              });
            }
        
            // 显示
            if (currentStatu == 'open') {
              this.data.list[index].showModalStatus = true;
              this.setData({
                showModalStatus: true,
                list: this.data.list,
              });
            }
          },
    

    最后在 details.wxss 设置一下弹窗和遮罩层的样式:

        .drawer_box {
          width: 650rpx;
          overflow: hidden;
          position: fixed;
          top: 50%;
          z-index: 1001;
          background: #FAFAFA;
          margin: -150px 50rpx 0 50rpx;
        }
        
        .drawer_content {
          border-top: 1.5px solid #E8E8EA;
          height: 210px;
          overflow-y: scroll; /* 超出父盒子高度可滚动 */
        }
        
        .btn_ok {
          padding: 10px;
          font: 20px "microsoft yahei";
          text-align: center;
          border-top: 1.5px solid #E8E8EA;
          color: #3CC51F;
        }
        
        .drawer_screen {
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 1000;
          background: black;
          opacity: 0.5;
          overflow: hidden;
        }
    

    OK,模拟弹窗也实现了。

    预览图片

    在这里插入图片描述

    最后一步就是在第一个页面实现图片预览和图片保存的功能,在 index.wxml 中为图片添加一个点击事件 previewImage。

        <image class='pic' mode='widthFix' src='../../image/GoZeroWaste.jpg' bindtap='previewImage'></image>
    

    在 index.js 中添加 imgalist 项(我们直接把公众号的二维码图片上传到 CSDN 的图片服务器了),并且实现 previewImage 事件处理。如下:

        Page({
          data: {
            motto: 'Hello World',
            company: "GoZeroWaste",
            lesson: "21天零垃圾生活指南",
            position: "垃圾魔法师",
            imgalist: ['https://img-blog.csdnimg.cn/20190109104518898.jpg'],
            userInfo: {},
            hasUserInfo: false,
            canIUse: wx.canIUse('button.open-type.getUserInfo')
          },
          previewImage: function (e) {
            wx.previewImage({
              current: this.data.imgalist,  // 当前显示图片的http链接
              urls: this.data.imgalist      // 需要预览的图片http链接列表
            })
          },
    

    大功告成,点击开发者工具中的 “预览”,使用微信扫描生成的二维码即可在手机端查看。

    教程就到这里囖,再见吧~

    在这里插入图片描述

    展开全文
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序...

    相关文章

    微信小程序开发(二)开发之日历打卡小程序发现页

    微信小程序开发(三)入门之创建打卡活动

    微信小程序开发(四)入门之打卡功能开发


    前言

    一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序如雨后春笋般出现在我们的视线里。追着这波大浪潮,笔者所在的公司也开始将有些需求转移到微信小程序上。接下来将以几篇文章将最近的一个日历打卡小程序的开发过程以及遇到的问题和大家做个分享。

    (一)微信开发者工具

    小程序团队推出了自己的开发工具-微信开发者工具,目前微信开发者工具任然在不断的完善中,在开发小程序时经常要不断的更新。论坛上吐槽的文章也是一大堆,存在很多bug,笔者在开发过程中也是被它坑过。笔者是安卓开发者,习惯于这种可视化的编程,所以没有选择Webstrom或者其他开发工具,接下来将介绍微信开发者工具基本功能



       

    1. 机型选择:小程序以IPhone6的屏幕尺寸为设计标准,让UI小姐姐按照IPhone6屏幕尺寸来切图。
    2. 预览界面:写好视图布局后点击编译,视图界面刷新显示
    3. 远程调试:手机端和PC端开发工具联调(非常实用)
    4. 上传代码:上传到腾讯服务器,提交审核必经步骤。可以填写版本号和备注信息
    5. 5-1:代码体积,微信限制 2M 以内。  5-2:ES语法转换,开发中一般不校验合法域名信息 。5-3:域名信息:小程序后台要做配置服务器域名,有request 域名,socket 域名以及uploadFiledownloadFile域名。注意:域名小程序要求必须是https 
    6. 控制台:打印输出信息,方便调试
    7. 资源文件:对应项目的文件目录,一般可以在这里进行断点调试
    8. 本地数据存储:显示的是本地存储的数据,对应的相关API是wx.setStorageSync(key,data)
    9. 视图调试:标组件以子父层级结构呈现,方便调试。

    以上就是在开发过程中微信开发者工具常用到的功能,微信开发者工具也在不断的完善,为了以后更好的提升开发效率,也需要我们在开发过程中将遇到的问题不断的反馈给小程序团队做优化,希望大家抱着包容的心态。开发过程中大家也可以依照自己的习惯选择其他的开发工具。


    (二)小程序框架以及目录结构介绍

        

    •  逻辑层

      小程序开发框架的逻辑层由 JavaScript 编写。逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。逻辑层对应的是js文件,在每个页面的js文件中,系统提供了一系列的方法如:页面生命周期onLoad(),onShow(),onHide(),等,下拉刷新onPullDownRefresh(),页面到底部(上拉加载)onReachBottom()方法,分享功能onShareAppMessage()等。


    • 视图层

      框架的视图层由 wxml  wxss 编写,由组件来进行展示。将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。 wxml 由小程序提供的组件组成,wxss css 样式。

    • app文件

      app.json 
      文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。页面的json文件一般用来配置当前页面的窗口表现。app.js 用来提供全局变量,如baseUrl。app.wxss 提供全局的css样式

      {
        "pages": [                    //页面的路径(在此处可快捷创建页面)
          "pages/index/index",
          "pages/logs/index"
        ],
        "window": {                   //视图窗口
          "navigationBarTitleText": "Demo"
        },
        "tabBar": {                   //底部tab
          "list": [{
            "pagePath": "pages/index/index",
            "text": "首页"
          }, {
            "pagePath": "pages/logs/logs",
            "text": "日志"
          }]
        },
        "networkTimeout": {           //设置是否超时
          "request": 10000,
          "downloadFile": 10000
        },
        "debug": true
      }
      
      
    • utils/.json 

      系统提供的工具类,一般编写公共的方法导出方便其他页面调用。

    (三)结束语

        本篇文章简单的介绍了微信开发者工具和小程序的框架,微信的开发文档对相关功能的介绍十分的详细。接下来将开始我们的日历打卡小程序开发之旅。


    展开全文
  • (转) 两天快速开发一个自己的微信小程序

    万次阅读 多人点赞 2018-04-22 21:59:54
    为什么要学小程序开发? 对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。 2.先放上我做的小程序可以在微信小程序搜索“悬笔e绝”,或者用...

    转自  https://www.cnblogs.com/xuanbiyijue/p/7980010.html

    一.写在前面

    1.为什么要学小程序开发?

        对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。

     

    2.先放上我做的小程序

    可以在微信小程序搜索“悬笔e绝”,或者用微信扫描下面的二维码哦

     

     

     

    (1)欢迎页:这个logo是当年念大学给社团做的logo,苦学了整整一周的PS啊。。。

     

     

    (2)首页:轮播头图,天气,豆瓣电影正在热映

     

     

    (3)全国城市切换页

     

    (4)天气详情页

     

    (5)地图周边服务

     

    (6)豆瓣电影

     

     

    (7)热点新闻

     

    (8)更多页面

     

    3.开发准备:

    1)有人开玩笑说,会vue小程序根本都不用学:

    微信小程序虽然是腾讯自己搞的,但是核心的思想跟vue等框架是一样一样的哦~

    2)善于搜集精美的小组件: “我们不生产代码,我们只是代码的搬运工”,善于找到想要的组件并把他们巧妙优雅的组装成一个大项目,也算是程序员一项基本技能了。

    具体怎么找到想要的小程序demo,篇末会给大家推荐小程序的资源,有很多大神的项目哦

     

     

     

     撸起袖子开干了

     

    一.注册小程序账号,下载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文件

    (1)var 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标签

    view,text,icon,swiper,block,scroll-view等等,这些标签直接查官网文档即可

     

     

    三.小程序框架、各个页面以及发布上线的注意点

     

    1.整个框架中的一些注意点

    (1)整个wxml页面,最底层的标签是<page></page>哦。

    (2) 每个页面顶部导航栏的颜色,title在本页面的json中配置,如果没有配置的话,取app.json中的总配置哦。

    (3)json中不能写注释哦,不然会报错的。

    (4)路由相关

    1)使用wx.SwitchTab跳转tab页的话,在app.json中除了注册pages页面,还需要在tabBar中注册tab页,才能生效哦。

    注意:tab最多5个,也就是我们说的头部或者底部最多5个菜单。其他的页面只能通过其他路由方法打开哦。

    2)navigateTo是跳到某个非tab页,比如欢迎页,电影详情页,城市选择页;在app.json中注册后,不能在tabBar里注册哦,不然同样也是不能跳转的哦。

    3)reLaunch跳转,新开的页面左上角是没有退回按钮的,本项目只用了一次,切换城市的时候哦。

    (5)页面之间传递参数

    参数写在跳转的url之中,然后另一个页面在onload方法中的传参option接收到。如下传递和获取id

     

    (6)data-开头的自定义属性的使用

    比如wxml中我们怎么写 

    点击的事件对象可以这么取,var postId = event.currentTarget.dataset.postid;

    注意: 大写会转换成小写,带_符号会转成驼峰形式

    (7)事件对象event,event.target和event.currentTarget的区别:

    target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件。

    比如,轮播图组件,点击事件应该要绑定到swiper上,这样才能监控任意一张图片是否被点击,

    这时target这里指的是image(因为点击的是图片),而currentTarget指的是swiper(因为绑定点击事件在swiper上)

    (8)使用免费的网络接口:

    本项目中用到了 和风天气api,腾讯地图api,百度地图api,豆瓣电影api,聚合头条新闻api等,具体用法可以看各自官网的接口文档哦,很详细的

    注意:免费接口是有访问限制的,所以如果用别人的组件用了这种接口的话,最好还是自己注册一个新的key替换上哦

    附上一个免费接口大全:

    https://github.com/jokermonn/-Api

    !!另外还要注意,要把这些接口的域名配置到小程序的合法域名中,不然也是访问不了的

    (8)wxss有一个坑:无法读取本地资源,比如背景图片用本地就会报错哦。

    把本地图片弄成网络图片的几种方式: 上传到个人网站;QQ空间相册等等也是可以的哦

     

     

    2.切换城市页面:

    (1)首页使用navigateTo跳转到切换城市页,由于首页并没有关闭,导致切换了城市返回来,天气信息还是旧的。

    正确的处理逻辑如下:

    1)使用reLaunch跳转到切换城市页面,实质是关闭所有页面打开新的页面哦。

    2)切换城市页面,更新公共变量中城市信息为手动切换的城区,再switchTab回到首页,触发首页重新加载。

    3)首页获取城市信息的时候加一个判断,全局没有才取定位的,全局有(比如刚才设置了)就用全局的哦。

    (2)城市列表的滚动和回到顶部

    基于scroll-view组件的scroll-top属性,初始就是0,滚动就会增加的;点击回到顶部给它置为0即可回到顶部

     

     

    3.天气页

    (1)初始化页面,天气显示的逻辑

    首先调用小程序的wx.getLocation方法获得当前的经纬度,然后调用腾讯地图获得当前的城市名称和区县名称,并存到公共变量中,

    再调用查询天气和空气质量的方法哦。

    (2)容错处理

    城市的名称长短不一,有点名字特别长,比如巴彦淖尔市这种,需要动态的获取完整的城市名称;

    有些偏僻的城市暂时没有天气信息,我们需要对返回的结果进行判断,没有信息的需要给用户一个良好的提示信息。

     

     

    4.周边-地图服务页面

    (1)调用百度地图的各种服务,查询酒店,美食,生活服务三种信息,更多信息可以看百度地图的文档

    (2)点击时给被点中的图标加个边框,数据驱动视图,所以使用一个长度为3的数组保存三个图标当前是否被点中的状态

    然后wxml再根据数据来动态添加class,增加边框样式

     

    5.豆瓣电影页

    (1)电影详情页的预览图片,用小程序本身的previewImage实现。

    (2)详情页使用onReachBottom()方法,监控用户上拉触底事件,然后发送请求继续获得数据,实现懒加载的效果

    (3)用户体验方面的优化,js中将整数评分比如7分统一改为7.0分,然后wxml模板再判断分数是否为0显示“暂无评分”

    (4)搜索之后清空搜索框

    因为小程序中不能使用getelementbyId这种方式获得元素,只能用数据来控制了

    在data中加一个属性searchText来保存搜索框的内容并和 input的value属性绑定,搜索完成或者点击X时,searchText变量清空即可实现清空输入框的效果哦。

     

    6.新闻页面

    (1)聚合头条新闻的免费接口,只返回了新闻的基本信息,新闻的主体内容是没有的哦。

    我找了好多新闻类的接口,好像都是没有新闻主体内容的。如果谁知道更好的接口欢迎留言告诉我哈~

    (2)当然,也可以自己去爬新闻网站的数据哦

     

    7.更多页面

     (1)小程序目前开放外链的功能只是给公司组织的小程序开放了,个人开发还是不能使用外链的哦。

     (2)彩蛋页面,获得用户信息

    通过 wx.setStorageSync('userInfos', userInfos);  可以获得登陆小程序的用户的个人信息,可以发送给后台存到数据库中,方便对用户进行分析

    我这里只是存储到浏览器缓存中哦,最大应该是10M缓存;如果用户把这个小程序从小程序列表中删除掉,就会清空这个缓存。

     

    8.发布注意

    (1) 新版本小程序发布的限制为2M,一般都是图片最占空间,所以尽量使用网络图片

    具体怎么把本地图片变成网络图片,上面有讲哦。

    (2)在开发者工具上预览测试没问题,点击上传;网页版小程序个的人中心的左侧“开发管理”菜单,第三块--开发版本就有了内容。

    (3)点击提交,填写小程序相关信息,就可以提交审核了哦。

    注意:分类最好填写准确,这样才能更快的通过审核哦。我这个小程序一天半时间过审上线的

     

     

    至此,我就把两天开发内碰到的坑和注意点都过了一遍,据说还有更多的坑,等之后更深入的开发再继续研究咯。

     

     

    四.写在最后

    1.推荐几个小程序开发的资料

    (1)知乎一篇小程序的资料:

    https://www.zhihu.com/question/50907897

    (2)小程序社区

    http://www.wxapp-union.com/portal.php

    (3)极乐小程序商店

    http://store.dreawer.com/

    2.我的个人微信公众号--悬笔e绝,欢迎关注哈~

    3.本项目的github地址,喜欢的童鞋点个star哈~

     https://github.com/yllg/WXxcx

     

    4.我的个人博客网站: 之后原创文章都会写在这里,然后不定期加一些酷炫的效果上去,嘿嘿嘿

    http://www.xuanbiyijue.com/

     

     

     

     

    展开全文
  • 开发微信小程序

    千人学习 2018-11-29 15:49:48
    微信小程序、是微信官方继服务号、企业号、订阅号...该课程属于微信小程序开发入门教程,主要面向所有开发人员,包括微信小程序背景介绍、基础与进阶、UI设计与开发、微信API的使用与详解、阶段案例和完整项目实战。
  • 微信小程序开发——阅读页面轮播图-新闻列表页面构建-数据绑定开发教程

    微信小程序开发——阅读页面轮播图-新闻列表页面构建-数据绑定开发教程:

    今天打开微信官方文档发现轮播图组件更新了两个功能,但是目前暂未启用,估计过几天就能使用了。

    属性名 类型 默认值 说明
    indicator-color Color rgba(0,0,0,.3) 指示点颜色 (这个属性目前暂未启用)
    indicator-active-color Color #000000 当前选中的指示点颜色 (这个属性目前暂未启用)

    最终的效果图:

    这里写图片描述

    代码部分:

    下面我们来继续研究代码部分: 
    wxml部分:

    <view>
      <swiper indicator-dots="true" autoplay="true" interval="2000">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}"></image>
        </swiper-item>
        </block>
      </swiper>
    </view>

    注意:swiper-item仅可放置在swiper组件中,宽高自动设置为100%。

    js部分:

      data:{
        imgUrls: [
          '/images/wx.png',
          '/images/vr.png',
          '/images/iqiyi.png'
        ]
      },

    js文件中定义了一个数组,里面存放图片的路径

    wxss代码:

    swiper,swiper image {
      width: 100%;
      height: 500rpx;
    }

    注意:轮播图组件的宽高样式需要设置在swiper标签上,官方文档中没有说明,只能一个一个试,最后的结论是必须定义在swiper标签。

    1、效果图预览

    这里写图片描述

    2、准备工作

    在拿到效果图后不要先急着去写代码,而是要去分析一下页面的整体结构,用什么方式定位和布局。小程序里建议使用flex布局,因为小程序对flex的支持是很好的。

    上一篇博客中完成了轮播图部分,接下来继续完成下面的新闻列表部分

    3、wxml部分

    新闻列表部分整体使用flex纵向布局比较合适, 
    先把页面内的元素标签和类名写好。

        <view class="post-container">
          <view class="post-author-date">
            <image class="post-author" src="{{item.avatar}}"></image>
            <text class="post-date">{{item.date}}</text>
          </view>
          <text class="post-title">{{item.title}}</text>
          <image class="post-image" src="{{item.imgSrc}}"></image>
          <text class="post-content">{{item.content}}</text>
          <view class="post-like">
            <image class="post-like-image" src="{{item.view_img}}"></image>
            <text class="post-like-font">{{item.reading}}</text>
            <image class="post-like-image" src="{{item.collect_img}}"></image>
            <text class="post-like-font">{{item.collection}}</text>
          </view>
        </view>

    4、wxss部分

    .post-container{
      display: flex;
      flex-direction: column;
      margin-top: 20rpx;
      margin-bottom: 40rpx;
      background-color: #fff;
      border-bottom: 1px solid #ededed;
      border-top: 1px solid #ededed;
      padding-bottom: 5px;
    }
    .post-author-date{
      margin: 10rpx 0 20rpx 10rpx;
    }
    .post-author{
      width: 60rpx;
      height: 60rpx;
      vertical-align: middle;
    }
    .post-date{
      margin-left: 20rpx;
      vertical-align: middle;
      margin-bottom: 5px;
      font-size: 26rpx;
    }
    .post-title{
      font-size: 34rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 10px;
      margin-left: 10px;
    }
    .post-image{
    
      width: 100%;
      height: 340rpx;
      margin: auto 0;
      margin-bottom: 15px;
    }
    .post-content{
      color: #666;
      font-size: 28rpx;
      margin-bottom: 20rpx;
      margin-left: 20rpx;
      letter-spacing: 2rpx;
      line-height: 40rpx;
    }
    .post-like{
      font-size: 13px;
      flex-direction: row;
      line-height: 16px;
      margin-left: 10px;
    }
    .post-like-image{
      width: 16px;
      height: 16px;
      margin-right: 8px;
      vertical-align: middle;
    }
    .post-like-font{
      vertical-align: middle;
      margin-right: 20px;
    }

    5、数据绑定

    数据绑定很重要,那么多的新闻列表,不可能每个新闻都复制粘贴一下代码。况且小程序还限制在1MB大小。

    我们把数据内容单独放在一个文件夹里,模拟从网络加载的情况

    如图,在根目录新建一个data文件夹,里面新建一个posts-data.js文件 
    这里写图片描述

    5.1、posts-data.js

    在posts-data.js里定义一个local_database数组

    var local_database=[
          {
            date:"Nov 10 2016",
            title:"文章标题1",
            imgSrc:"/images/post/crab.png",
            avatar:"/images/avatar/1.png",
            content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介",
            reading:"92",
            collection:"65",
            view_img:"/images/icon/chat.png",
            collect_img:"/images/icon/view.png",
          },
          {
            date:"Nov 20 2016",
            title:"文章标题2",
            imgSrc:"/images/post/bl.png",
            avatar:"/images/avatar/2.png",
            content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介",
            reading:"88",
            collection:"66",
            view_img:"/images/icon/chat.png",
            collect_img:"/images/icon/view.png",
          },
          {
            date:"Nov 25 2016",
            title:"文章标题3",
            imgSrc:"/images/post/cat.png",
            avatar:"/images/avatar/3.png",
            content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介",
            reading:"123",
            collection:"55",
            view_img:"/images/icon/chat.png",
            collect_img:"/images/icon/view.png",
          }
        ]

    别忘了在posts-data.js文件最后加上输出

    module.exports={
            postList:local_database
        }
    •  

    5.2、post.wxml使用数据绑定:

    例如用户头像图片的路径,用双大括号括起来 里面和数组里定义的要相同,然后前面要加上item. 意思是绑定数组里定义的avatar,代码如下:

     <image class="post-author" src="{{item.avatar}}"></image>

    5.3、post.js

    先把posts-data.js文件引入:

    var postsData=require('../../data/posts-data.js')

    然后在onLoad: 函数内设置Data的值

    onLoad:function(options){
        // 生命周期函数--监听页面加载
        this.setData({
          posts_key:postsData.postList
        })
      },

    6、for循环

    在wxml要循环的部分外面加上<block> </block>标签

    <block wx:for="{{posts_key}}" wx:for-item="item">
    <view class="post-container">
          <view class="post-author-date">
            <image class="post-author" src="{{item.avatar}}"></image>
            <text class="post-date">{{item.date}}</text>
          </view>
          <text class="post-title">{{item.title}}</text>
          <image class="post-image" src="{{item.imgSrc}}"></image>
          <text class="post-content">{{item.content}}</text>
          <view class="post-like">
            <image class="post-like-image" src="{{item.view_img}}"></image>
            <text class="post-like-font">{{item.reading}}</text>
            <image class="post-like-image" src="{{item.collect_img}}"></image>
            <text class="post-like-font">{{item.collection}}</text>
          </view>
        </view>
    </block>

    语法是:

    wx:for=”{{数组名}}”

    展开全文
  • 微信小程序开发——基础目录、欢迎页面的创建(电影小程序)的开发教程: 0、效果图展示: 1、目录结构讲解: 微信小程序有四种文件类型: *.wxml *.wxss *.js *.json ...
  • 先看下最后的效果图: 首先打开开发工具,创建quick start项目,简单的修改一下。 把Index文件夹重命名为welcome; 底部的hello world改为一个类似于按钮的样式; 添加背景颜色;... 开启小程序之旅 </vie
  • 微信小程序基础之创建使用教程

    万次阅读 2016-11-09 18:12:58
    本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志.1. 获取微信小...
  • 小程序里建议使用flex布局,因为小程序对flex的支持是很好的。 上一篇博客中完成了轮播图部分,接下来继续完成下面的新闻列表部分3、wxml部分新闻列表部分整体使用flex纵向布局比较合适, 先把页面内的元素标签和...
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2019-07-16 13:27:41
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 微信小程序开发者工具详解

    万次阅读 多人点赞 2018-07-22 09:39:47
    一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,所以必须...
  • 微信小程序开发【前端+后端(java)】

    万次阅读 多人点赞 2020-03-26 12:29:36
    现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的...
  • 征服微信小程序视频教程

    万人学习 2018-10-22 21:38:06
    征服微信小程序视频教程 微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。学员通过该视频课程,可以完全了解小程序的开发方法,并可以独立开发...
  • 微信公众平台开发微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等...
  • vsCode 开发微信小程序插件

    万次阅读 2018-02-07 08:21:47
    vsCode 开发微信小程序插件 问题描述 用微信开发者工具开发微信小程序不适应;没事,我们还有强大的 vsCode; 解决方案 用 vsCode 开发微信小程序可以配置以下插件,让开发更美好: 1. vscode weapp api ...
  • 微信小程序全方位深度解析

    万人学习 2019-06-24 13:09:17
    微信小程序是微信在2016年9月15日发布的一种新的应用形态,不需要下载安装即可使用的应用。本套视频教程将会带大家从基础环境搭建、配置、api的使用到开发出一个app的完整流程.
  • 微信小程序开发实战入门,学习小程序云开发,摆脱后台,自己实现后台数据,从此就可以愉快的写小程序,自己实现小程序后台了。
  • 微信小程序开发实战

    万人学习 2019-04-01 14:05:00
    本套课程使用了元认知教学法,直接实战式教学,摆脱学院派的理论式讲解,对于0基础的学员可以入门编写微信小程序,过程中指导如何学习使用文档查阅接口等,通过两个完整的实战小项目的实例,入手小程序开发
1 2 3 4 5 ... 20
收藏数 141,407
精华内容 56,562
关键字:

微信小程序开发