微信小程序开发_微信小程序云开发,在群消息中点击微信小程序获取微信群信息 - CSDN
  • 开发微信小程序

    千人学习 2018-11-29 15:49:48
    微信小程序、是微信官方继服务号、企业号、订阅号...该课程属于微信小程序开发入门教程,主要面向所有开发人员,包括微信小程序背景介绍、基础与进阶、UI设计与开发、微信API的使用与详解、阶段案例和完整项目实战。
  • 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/

     

     

     

     

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

    万人学习 2019-04-01 14:05:00
    本套课程使用了元认知教学法,直接实战式教学,摆脱学院派的理论式讲解,对于0基础的学员可以入门编写微信小程序,过程中指导如何学习使用文档查阅接口等,通过两个完整的实战小项目的实例,入手小程序开发
  • 微信小程序开发到上线步骤(持续更新)

    万次阅读 多人点赞 2020-04-01 00:58:43
    电影小程序案例: 主界面如下:通过调用豆瓣电影的API接口获取到的信息,每次 加载10条数据,当滚动 条每次滚动到最低端的时候,自动通过异步再加载10条 评价按钮: 还可以上传图片并提交评价,提交的评价...

    电影小程序案例:

    主界面如下:通过调用豆瓣电影的API接口获取到的信息,每次 加载10条数据,当滚动 条每次滚动到最低端的时候,自动通过异步再加载10条

    评价按钮:

    还可以上传图片并提交评价,提交的评价或者图片都是 储存到云存储当中,吧图片、评分以及评价的fileID存到我们 的云数据库当中,

    而另一个选项:显示头像、用户名称以及openid

    那么我们开始创建项目:后端服务选择小程序.云开发

    目录也要创建在一个空文件夹

    初始界面如下:

    然后把pages下一级目录全部删除,这个时候会有报错,

    那么 我们把app.json文件内容的路由部分全删除就OK了!

    删除之后我们重新创建两个文件夹,在创建文件夹的时候千万不要上下级目录重名,否则可能会创建失败。创建好后并且保存(Ctrl+S),这个时候两个文件夹下面会自动生成配置文件等等。

    app.json文件初始配置 

    {
      "pages": [
        "pages/movie/movies",
        "pages/profile/profiles"
      ],
      "window": {
        "backgroundColor": "#F6F6F6",
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#E54847",
        "navigationBarTitleText": "最新电影",
        "navigationBarTextStyle": "white"
      },
      "tabBar": {
        "color": "#000",//表示字体没有被选择的时候的颜色
        "selectedColor": "#E54847",//表示字体被选择的时候的颜色
        "list": [{
          "pagePath": "pages/movie/movies",//tabBar分页路由路劲
          "text": "电影",
          "iconPath": "images/j.png",//指的是当前tabBar没有被选中的图片路劲
          "selectedIconPath": "images/k.png"//指的是当前tabBar被选中的图片路劲
        },{
          "pagePath": "pages/profile/profiles",//tabBar分页路由路劲
          "text": "我的",
          "iconPath": "images/l.png",//指的是当前tabBar没有被选中的图片路劲
          "selectedIconPath": "images/m.png"//指的是当前tabBar被选中的图片路劲
        }]
      }
    }

    然后把pages以及images文件夹下面的文件或者图片都删除,然后用自己准备的图片,或者 重新创建分页文件等。

    上面这段代码中list数组是有要求的,最少2个选项,最多5个选项。如下就是2个的。

    接下来学习如何在我们的小程序项目当中引用第三方组件库,其实

    第三方组件库的作用,是我们在小程序项目开发过程中,有些组件或者有些样式我们是不需要去自己写的,我们可以引用第三方组件库,就能快速实现我们界面的一个需求。

    那么如何安装我们的组件库呢?先去官网

    安装:

    当然,在安装之前,我们需要进行一些代码的初始化设置,

    首先找到miniprogram文件夹,打开终端,当然笔者不知道 为什么,我打开终端会显示npm或者node 不是内部或者 外部命令 ,但是笔者环境都是配置好了的,但是笔者想到了一个 最佳的办法

    那就是先点击硬盘打开,然后在同时在进入 miniprogram文件夹里面,然后按住shift并同时点击 鼠标左键,选择打开命令窗口

    这个时候再输入相应的命令,进行下载或者操作 。

    首先输入npm init命令,这个相当于初始miliprogram文件

    当然在初始化过程中,我们遇到下面如版本号啥的,就一路回车就好了!

    一路回车完了后,在 miniprogram文件夹下面就会生成一个package.json文件,这个文件时 对当前miniprogram这个项目的配置信息以及一些另外的包的管理在这个文件当中进行相应的配置,

    然后安装vant,并输入命令npm i vant-weapp -S --production这个命令是通过npm安装vant,安装的过程中或者结束,务必点击菜单栏的“工具”选项,然后点击“构建npm”选项。然后点击确定。

    这个时候miniprogram文件夹下面多了一个miniprogram_npm包,这个包里面实际上就是我们的一个vant这样一个请求库。

    然后点击界面的“详情”,选择“使用npm模块”

    选中之后,我们的vant组件库才能起作用。

    那么我们接下来先验证一下vant能否起作用?

    当然,在 使用组件库之前我们应该引入组件库 、

    视频看到 4-2Vant组件库 。!!!!!!!!!!

    我们先显示一个vant组件库的按钮。

    这个时候就可以看到对应的按钮就可以在界面上显示了,也就是说,我们的vant组件库已经顺利的在我们的项目中被引用了。

    接下来我们去完成电影列表的问题。

    电影列表的信息,是通过豆瓣电影的API接口获取的,而不是笔者写死的。

    也就是我要从我的小程序端要想豆瓣电影的服务端去发起一个请求,那么我们先来看一下在小程序端如何发起请求 ,

    发起请求的方式一共有两种,小程序端和云函数。

    一种是在小程序端发送请求,另一种是我们可以在云函数中发起请求。

    如果在小程序 端发送请求,那么小程序端中有一个 API函数叫做wx.request(),通过这个函数可以通过小程序端直接向某一个服务端发起请求,如果我们通过云函数发起请求,那么其实是通过小程序的后端去发送请求。这个时候我们可以在小程序的云函数当中去安装第三方库。比如说常用的request,got等都可以 发起请求,在云函数端支持的协议是取决于第三方库的。一般情况下支持https/http均可以支持,在小程序端发起请求,请求回来的域名一定要经过ICP备案,才能去请求,否则 的话是不可以的,那么在云函数端的请求他的限制是比较开放一些。可以不经过备案,也可以去发送请求。所以 我们可以通过两种方式向豆瓣电影接口发起请求。而我们接下来是通过云函数发起请求来演示的。

    我们先来 演示如何 通过第三方库request发送请求,首先登陆GitHub官网,

    选择request当中一个request-promise方法,点击进去。当然你也可以直接在GitHub上面直接搜索request-promise方法,

    如果需要用这个方法(request-promise),我们需要先安装request,然后再安装request-promise方法(如下:)

    cloudfunctions作为云函数端,我们要通过云函数,首先我们得先创建一个云函数,在cloudfunctions下一级目录。

    创建好了我们就使用终端打开,在终端中输入第一条安装request的命令,安装完这个包后,就安装request -promise这个包,但是得记住,必须得先按照request这个包,然后再安装request-promise这个包。

    当安装好这两个包后,在我们的cloudfunctions下一级目录movielist里的package.json里面就会对应两个包的版本。(如下:)

    那么我们如何通过request-promise去发送一个请求呢?当然也很简单,我们打开index.js文件,首先引入我们的request-promise,

    指令为

    var rp = require('request-promise');

    这条指令在GitHub里面也有,

    引入之后,我们再看GitHub里面有一个rp函数,

    rp('http://www.google.com')
        .then(function (htmlString) {
            // Process html...
        })
        .catch(function (err) {
            // Crawling failed...
        });
    

    我们直接在云函数入口函数中直接通过rp函数发起请求,直接把请求结果返回,

    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init()
    
    var rp = require('request-promise');
    
    // 云函数入口函数
    exports.main = async (event, context) => {
    
      return rp(`http://api.douban.com/v2/movie/in_theaters`)
        .then(function(htmlString) {
    .........
        })
        .catch(function(err) {
    .........
        });
    }

    rp的第一个参数是当前我要请求的地址,这个地址指的是豆瓣电影的列表接口

    其实我们在请求的时候,我们要对数据进行分页的请求,比如说我们不可能一次把所有数据都请求回来,假设我每次请求10条,通过ES6的一个叫字符串模板拼接,这样的话我们可以不通过加号拼接,这样看起来 可读性较强。

    start是请求回来的值,而count是一次去请求多少条数据。当然这些值在调用的时候都会传回到我们的云函数里面。

    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init()
    
    var rp = require('request-promise');
    
    // 云函数入口函数
    exports.main = async (event, context) => {
    
      return rp(`http://api.douban.com/v2/movie/in_theaters?start=${event.start}&count=${event.count}`)
        .then(function(res) {
          return res;
        })
        .catch(function(err) {
          console.err(err);
        });
    }

    .then是表示请求成功的话,而.catch是表示请求失败的话。res表示请求回来的结果,return直接把请求回来的结果返回,如果报错我们也通过控制台打印错误信息,便于我们去找到对应的问题。

    当我们定义好云函数后,我们就在云函数的文件上右键上传并部署我们的云函数 。

    我们回到我们的电影主界面,movie目录,电机打开movies.js文件,在这个.js文件当中我们需要做的是当加载电影这个 界面的时候,我们就要去发送请求,也就是说,我需要去调用刚刚定义好的云函数 ,在movies.js当中定义了很多生命周期函数,也就是钩子函数。 这些钩子函数是会当生命周期到达这个阶段的时候会被自动的调用,那么我们直接在onLoad这个函数,这是一个监听页面加载函数,也就是页面加载的时候会自动去加载这个onLoad函数,

    然后我们直接在onLoad里面直接去调用我们的云函数 ,用cloud.callFunction()的方式去调用云函数,

      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        wx.cloud.callFunction({
          name: 'movielist'//云函数的名字
        }).then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log(err);
        });
      },

    那么在movielist/index.js里面的回调函数中我也想打印这个值,怎么办呢?通过云函数在控制台显示,写一个console.log(res);

    因为我想演示一下,这个打印值在哪儿去看。一定要谨记,只要云函数被改动,一定得随时上传并部署。

    
    // 云函数入口函数
    exports.main = async (event, context) => {
    
      return rp(`http://api.douban.com/v2/movie/in_theaters?start=${event.start}&count=${event.count}`)
        .then(function(res) {
          console.log(res);//在调用云函数的时候也看看这个值
          return res;
        })
        .catch(function(err) {
          console.err(err);
        });
    }

    打开云开发,点击云函数,在我们的云开发中,已经有我们刚创建的云函数movielist,点击刷新可出来。

    那么我们来试一下,现在打开我们的调试器,点击编译,可以看当前在控制台显示的结果,当然这个结果我们是在小程序端打印的。

    注意,随时上传并部署云函数(常犯错误请看另一个 博客)。 

    其中注意,云函数里面写的console.log(res)并不会打印在console里面,因为我们的云函数是运行于服务端的。服务端的日志是不会打印纸top控制台里面,其云函数的日志可以在 云开发控制台的云函数的日志里面看到,如下:

    所以,movielist/index.js下面的console.log(res)打印的日志就如上图所示,而控制台显示的并不是这个console.log(res)的信息。

    找日志,不要去云函数 找,找不到的,因为我们的云函数是运行于服务端的。这个日志是res,而console.log他就是在控制台打印,那么说console.log(res)是不是就是把日志打印到了控制台呢,并不是,只有return res才把日志返回到服务端的云函数日志里面。所以控制台 显示的并不是res。

    而小程序控制台显示的是结果,如下:

    那么如果,我们想要去显示数据在页面上,需要在pages/movie.js的data函数里面去定义一个对应的值。

    比如说我们定义一个电影的列表:movieList: [ ]

    data: {

    movieList: []

    },

    那么我们也可以看到,控制台里面返回的result其实是一个字符串(通过看大括号有双引号),字符串并不利于我们去获取这个值,而我们想要的是这个字符串里面subject里面的数组,subject对应的其实才是我们想要的列表。

    那么,我们想要这个列表,我们就在onLoad函数里面加一个this.setData方法,通过这个方法 给movieList赋值,在赋值的时候我们直接去解析我们当前的字符串,我们要解析的是res.result,如何解析呢?有JS基础的同学都知道,如何把一个JS变成一个 对象,我们应该通过JSON.parse的方式,我们通过这种方式直接把字符串解析成对象,代码如下:

    onLoad: function (options) {
        wx.cloud.callFunction({
          name: 'movielist'//云函数的名字
        }).then(res=>{
          console.log(res);
          this.setData({
            movieList:JSON.parse(res.result).subjects
          })
        }).catch(err=>{
          console.error(err);
        });
      },

    后面还得加一个subjects,因为我们需要的是字符串result里面的subject。

    而我们需要把当前返回的结果追加到movieList的结果里面。为什么要追加,而不是直接赋值?

    你想想,如果直接赋值,那每次刷新10条(异步加载 10条),如果 不是追加,那么他将会覆盖掉之前的,所以我们要追加,就不会覆盖以前的。

    所以 我们每次操作,应该先取到movieList的值然后把获取到的字符串列表转化的对象追加到原来的movieList

    先去到movieList的值:     this.data.movieLst()

    然后追加到movieList:     movieList:this.data.movieList(JOSN.parse(res.result).subjects)

    所以代码如下:

    onLoad: function (options) {
        wx.cloud.callFunction({
          name: 'movielist'//云函数的名字
        }).then(res=>{
          console.log(res);
          this.setData({
            movieList: this.data.movieList(JSON.parse(res.result).subjects)
          })
        }).catch(err=>{
          console.error(err);
        });
      },

    那么,我们每次取的时候,还要跟一个对应的参数,所以我们应该在云函数名字后面再跟一个参数。也许你会想到下面这种,但是不正确。

    onLoad: function (options) {
        wx.cloud.callFunction({
          name: 'movielist',//云函数的名字
          data: {
            start: 0,
            count: 10
          }
        }).then(res=>{
          console.log(res);
          this.setData({
            movieList: this.data.movieList(JSON.parse(res.result).subjects)
          })
        }).catch(err=>{
          console.error(err);
        });
      },

    参数内容包括我们从第几条开始去取,第一次从第0条开始取所以start=0,每次取10条,所以count=10,那第二次呢?第二次从第10条开始取,取到第20条,那么第三次呢第四次呢?

    所以每次取的值start是改变的!

    那么这个start的值其实和movieList的长度是一样的!

    正确的代码如下:

    onLoad: function (options) {
        wx.cloud.callFunction({
          name: 'movielist',//云函数的名字
          data: {
            start: this.data.movieList.length,
            count: 10
          }
        }).then(res=>{
          console.log(res);
          this.setData({
            movieList: this.data.movieList(JSON.parse(res.result).subjects)
          })
        }).catch(err=>{
          console.error(err);
        });
      },

    那么我们也应该将这些内容呈现在“电影页面”,所以我们要写movie/movies.wxml文件

    <view class="movies" wx:for="{{movieList}}" wx:key="{{index}}">
      <image src="{{item.images.small}}"></image>
      <view class="movie-info">
        <view class="movie-title">{{item.title}}</view>
        <view>观众评分: {{item.rating.average}}分</view>
        <view wx:for="{{item.casts}}">
          {{item.name}}
        </view> 
        <view>年份:{{item.year}}</view>
      </view>
    </view>

    写好后,这个时候 ,编辑窗体显示如下:

    这个时候我们再去写一些CSS代码,这个在微信小程序里面,应该叫微信SS(wxss)

    .movie{

    height: 300rpx;//给我们的电影设置高度

    display: flex;//设置一个弹性盒子

    }

    因为view这样一个标签是块儿元素,他自己会占用一行,所以各位演员的名字各自占了一行,如果要排成一行,我们就不能用view标签。所以我们应该把循环演员的标签作为一个行级标签 放在块级标签里面。(如下:)

        <view >演员:
        <text wx:for="{{item.casts}}">{{item.name}}  </text>      
        </view> 

    那么关于 演员名字之间的空格,有两种方式。

    第一是:view标签演员的后面打空格

    第二是:{{item.name}}后面加空格

    那么此时movie/movies.wxss文件

    .movies{
      height: 300rpx;
      display: flex;
      padding: 10px;
      border-bottom: 1px solid #ccc;
    }
    
    .movie-img{
      width: 200rpx;
      height: 100%;
    }
    
    .movie-info{
      flex: 1;
    }
    
    .movie-title{
      color: #666;
      font-size: 40rpx;
      font-weight: bolder;
    }
    
    .movie-average{
      color: #faaf00;
    }

    那么如何让我们在翻到最底部的时候,能够异步加载呢?

    当我们界面加载的时候,其实

    wx.cloud.callFunction({
          name: 'movielist',//云函数的名字
          data: {
            start: this.data.movieList.length,
            count: 10
          }
        }).then(res=>{
          console.log(res);
          this.setData({
            movieList: this.data.movieList.concat(JSON.parse(res.result).subjects)
          });
        }).catch(err=>{
          console.error(err);
        });

    上面这个函数(这段代码)的意思是向服务端发送请求,请求回我们的电影信息,当我们滚动条滚动到底部的时候是不是还应该执行这段代码?

    所以我们把这段代码单独提取到一个函数里,比如说我们把这段代码提取到getMovieList函数了,其内容就为这段代码,当然,我们在请求的时候,我们应该有一些更好的提示,比如一个等待加载框,当请求成功后,我们就把这个加载框隐藏。通过wx.hideLoading()方法隐藏,当然,失败的话我们也要把它隐藏掉。

    代码如下:

    // pages/movie/movies.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        movieList:  []
      },
    
      getMovieList: function(){
        wx.showLoading({
          title: '加载中',
        })
        wx.cloud.callFunction({
          name: 'movielist',//云函数的名字
          data: {
            start: this.data.movieList.length,
            count: 10
          }
        }).then(res => {
          console.log(res);
          this.setData({
            movieList: this.data.movieList.concat(JSON.parse(res.result).subjects)
          });
          wx.hideLoading()//当请求成功后隐藏加载框
        }).catch(err => {
          console.error(err);
          wx.hideLoading()//如果失败也要隐藏掉
        });
      },
    //我们现在要通过movies.wxml这个文件跳转到comments.wxml
      gotoComment: function(event){
        wx.navigateTo({
          url: `../comment/comments?movieid=${event.target.dataset.movieid}`,
        });
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.getMovieList();
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        this.getMovieList();
      },
    
    })

    下面来做一个评价按钮,以及一个评价界面。

    <view class="movies" wx:for="{{movieList}}" wx:key="{{index}}">
      <image src="{{item.images.small}}" class="movie-img"></image>
      <view class="movie-info">
        <view class="movie-title">{{item.title}}</view>
        <view>观众评分: 
          <text class="movie-average">{{item.rating.average}}分</text> 
        </view>
        <view >演员:
          <text wx:for="{{item.casts}}">{{item.name}}  </text>      
        </view> 
        <view>年份:{{item.year}}</view>
      </view>
      <button bindtap="gotoComment" data-movieid="{{item.id}}" class="movie-conmment">评价</button>
    </view>
    .movie-conmment{
      height: 60rpx;
      background: #E54847;
      color: #fff;
      font-size: 26rpx;
      margin-top: 120rpx;
    }
    //pages/comment/comments.js
    /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log(options);
      },

    现在评价按钮以及movies.js里面的界面都做好了。

    其中,options是一个对象,里面对应的是movieid;

    那么,我们现在可以根据这个movieid再去 豆瓣电影接口去获取到id所对应的详情界面,还是如上,在云函数里面创建一个node.js云函数,用于获取详情。

    每次创建新的云函数的时候,都要安装request以及request-promise这两个包,安装这两个包的命令前面也提到过,安装好后

    要用云函数,就要把request-promise引入过来,即

     

    var rp = require('request-promise');

    放在cloud.init()的下面。

    然后把查询到的结果返回到小程序端,

    查询到的结果如下:

    rp('http://www.google.com')
        .then(function (htmlString) {
            // Process html...
        })
        .catch(function (err) {
            // Crawling failed...
        });

    放到小程序端,

    将云函数里面的这些东西都提前删除,用不到的,也就是现在注释的这些。

    // 云函数入口函数
    exports.main = async (event, context) => {
      // const wxContext = cloud.getWXContext()
    
      return {
        // event,
        // openid: wxContext.OPENID,
        // appid: wxContext.APPID,
        // unionid: wxContext.UNIONID,
      }
    }

    然后就变为下面这:

    // 云函数入口函数
    exports.main = async (event, context) => {
    
      return {
    
      }
    }

    将查询到的结果,用于返回到小程序端:

    // 云函数入口函数
    exports.main = async (event, context) => {
    
      return rp('详情的URL地址')
        .then(function (htmlString) {
          // Process html...
        })
        .catch(function (err) {
          // Crawling failed...
        });
    }

    注意:详情的URL地址 的两端用ES6的字符串模板符,即 ` `  这样的符号,他是英文状态下的Esc下面的那个键,可以直接去拼接其他东西,比英文状态下的单引号简单一点。 

    rp(`http://api.douban.com/v2/movie/subject/id`)

    那么用详情的URL地址去拼接上前端传回来的movieid

    rp(`http://api.douban.com/v2/movie/subject/?apikey=0df993c66c0c636e29ecbb5344252a4a${event.movieid}`)

    这个时候,我们的控制台就会显示如下:

    可以看到,加载的10个电影,而且点击评价后,跳转到页面pages/comment/comments,并且有50条数据。

    然后我们在吧这个评价在pages/comment/comments.wxml这个页面中好好做一下。

     

     

     

     

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

    万次阅读 多人点赞 2018-03-05 12:39:53
    小程序开发与传统的web前端开发极其相似,想必各位技术宅们关心的是如何去开发一个小程序,这里我简单介绍一下如何简单上手开发小程序。第一步:安装 首先下载微信开发者工具 ...
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2019-07-16 13:27:41
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 微信小程序开发【前端+后端(java)】

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

    万次阅读 多人点赞 2018-07-22 09:39:47
    一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,所以必须...
  • 微信小程序开发过程中,图标的使用是很常见很普遍的。一般情况下,在微信小程序项目的文件目录里面images里面,可以直接引用本地的图标文件,但是通过使用字体图标或者background设置背景图的时候,就不用引用本地...
  • 微信小程序开发环境搭建

    万次阅读 多人点赞 2016-09-30 08:42:38
    微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,...不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具。那么接下来就让我们一起来开始
  • 微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个...
  • 微信小程序开发教程手册文档

    千次阅读 多人点赞 2018-06-28 18:34:41
    微信小程序开发教程文档微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程序...
  • 微信小程序开发入门教程

    万次阅读 2017-04-28 20:38:31
    做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。 微信小程序开发文档链接为:...知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发:  /***************
  • 微信小程序开发入门教程 含视频 有源码

    万次阅读 多人点赞 2017-07-03 10:31:18
    微信小程序开发入门教程  做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。 微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图:    ...
  • 摘要:微信小程序教程合集、微信小程序开发资源合集、微信小程序DEMO合集、微信小程序商店合集、微信小程序经验合集、微信小程序技巧合集 微信小程序开发工具 5款微信小程序开发工具使用报告 微信小...
  • 微信小程序开发(一) 微信登录流程

    万次阅读 多人点赞 2019-04-13 16:05:32
    最近在研究微信小程序开发,非常有意思的一个东西。花了一点时间写了一个微信的登录流程,包括后端接口和小程序代码。做过微信登录的都知道,我们需要一个标识来记录用户的身份的唯一性,在微信中unionId就是我们所...
  • 相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页前言上篇介绍了日历打卡小程序发现页视图相关开发知识点。本篇文章将介绍小程序的网络请求,数据绑定...
1 2 3 4 5 ... 20
收藏数 141,271
精华内容 56,508
关键字:

微信小程序开发