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

    2019-04-01 14:05:00
    本套课程使用了元认知教学法,直接实战式教学,摆脱学院派的理论式讲解,对于0基础的学员可以入门编写微信小程序,过程中指导如何学习使用文档查阅接口等,通过两个完整的实战小项目的实例,入手小程序开发
  • 微信小程序开发全案精讲是一套以案例为主线的课程,课程总共九章,第一章回顾基础知识,后面八章全部是以典型的案例作为讲解,选取了美食类:仿菜谱精灵微信小程序、资讯类:仿今日头条微信小程序、生鲜类:仿爱鲜蜂...
  • 注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...

    注册微信小程序

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

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

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

    在这里插入图片描述

    一切 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 

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

    (三)结束语

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


    展开全文
  • 电影小程序案例: 主界面如下:通过调用豆瓣电影的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这个页面中好好做一下。

     

     

     

     

    展开全文
  • 个人中心:点击头像显示的是个人中心面板,展示的是小程序版本以及系统版本...远程调试:真机的远程调试功能,会通过我们的网络连接对我们手机运行的小程序进行一个调试 切后台:切后台按钮会帮助我们快速的切到不...

    这里写图片描述
    个人中心:点击头像显示的是个人中心面板,展示的是小程序版本以及系统版本更新之后的一个推送消息,也方便我们去切换我们的小程序账号
    在头像后边有三个按钮:
    模拟器,编辑器和调试器:点击来显示或隐藏相应的模块
    编译模式:普通编译和自定义编译条件
    预览:在真机预览
    远程调试:真机的远程调试功能,会通过我们的网络连接对我们手机运行的小程序进行一个调试
    切后台:切后台按钮会帮助我们快速的切到不同的场景值,通过这个场景值可以帮助我们去个性化一些我们的功能需求
    清缓存:我们可以清楚我们开发者工具和我们调试设备的一个数据缓存,文件缓存,授权缓存,网络缓存和我们的登录状态
    上传,测试,腾讯云,详情
    上传会帮助我们把本次的小程序代码上传到我们的管理后台,会默认的设置为我们的开发版本
    小程序都有哪些版本?
    这里写图片描述
    预览版本:在手机上预览在我们手机上是一个怎样的表现
    开发版本:通过上传之后把我们的本地代码。上传成一个具有版本号的小程序的应用,那么应用开发者权限的成员可以通过小程序开发助手来看到我们的开发版本
    体验版本:就是我们在小程序管理后台可以直接将我们的开发版本切换成我们的体验版本,具有体验权限的成员就可以看到体验版本
    如果我们要将我们的开发版本上线成一个线上版本的话,我们需要先去提交审核,提交审核之后,我们的小程序就称为了一个审核版本的小程序,那么微信通过我们的审核之后,我们的小程序就正式的发布上线了。

    测试按钮:测试按钮我们可以通过每24小时生成一个测试报告。微信会给我们随机的分配4到8种的机型测试我们的小程序页面的一个首屏加载时间,CPU占比等这些指数
    腾讯云:第三方平台,可以快速的帮助我们构建一个小程序的开发环境和线上环境
    点击详情,会弹出一个详情的面板,可以通过一些项目的设置,还可以看到我们一些域名信息,腾讯云的状态
    项目设置:可以设置调试的一个基础库版本,
    可以设置编译的配置:Es6转ES5等等

    调试模块:
    主要分为七个模块
    这里写图片描述
    console: 打印小程序页面的调试log信息
    sources:会列出微信小程序页面的所有脚本文件
    Network:展示网络请求的状态信息
    Stroge:在小程序里面通过调用wx.setStroge和wx.setStrogeSycc函数设置我们的缓存的时候,在这里可以动态的修改这些缓存数据
    APPData: 是微信小程序页面上真实展示的一个数据,可以在这里动态的修改,来查看我们小程序页面在模拟器上不同设备的一个兼容性的情况
    wxml 页面:展示了微信小程序页面 的各个组件元素以及我们可以通过对这些组件元素。对它进行一个样式属性的修改
    sensor:只要是我们的一个地址位置信息和一个设备旋转角度的一个展示,在这里我们可以动态的去修改我们的地理位置信息来模拟我们小程序在不同地理位置下的一个表现,在设备旋转角度这里,我们可以设置旋转角度的参数来查看它的一个设备的旋转角度,可以看到各个坐标轴的变化

    OK,这就是对开发者工具详解。

    展开全文
  • 从零开始小程序今天一不小心拿到了小程序的内测资格,为了不辜负微信团队的信任,我决定十一奋斗一把!不过话说我可是一个Android工程师啊!所以就让我们从零开始!所以本文非常适合非前端工程师学习!哈哈!都说...

    从零开始小程序

    今天一不小心拿到了小程序的内测资格,为了不辜负微信团队的信任,我决定十一奋斗一把!不过话说我可是一个Android工程师啊!所以就让我们从零开始!
    所以本文非常适合非前端工程师学习!哈哈!都说小程序出来前端会抢移动端饭碗,但是据我所知现在好多学习的都是移动开发工程师,谁抢谁的还不一定呢!
    PS:表问我怎么拿到小程序内测资格的,有种东西叫内部资源!

    • 准备工作
      • IDE搭建
      • 知识准备
    • 从零开始
      • app.js
      • app.json
      • app.wxml
      • app.wxss
    • Hello World
      • 创建程序实例
      • 美化ActionBar
      • 美化页面
      • 配置首页
    • 超级Hello World
      • 事件绑定函数
      • 更新界面数据

    准备工作

    IDE搭建

    就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程

    图片发自简书App


    知识准备

    JavaScrip还是要看看的,推荐教程 廖雪峰大神的博客
    HTML+CSS 大概知道是干啥的就行


    从零开始

    微信小程序中就四种类型的文件

    • js ---------- JavaScrip文件
    • json -------- 项目配置文件,负责窗口颜色等等
    • wxml ------- 类似HTML文件
    • wxss ------- 类似CSS文件

    在根目录下用app来命名的这四中类型的文件,就是程序入口文件。

    app.json

    必须要有这个文件,如果没有这个文件,IDE会报错,因为微信框架把这个作为配置文件入口,
    你只需创建这个文件,里面写个大括号就行
    以后我们会在这里对整个小程序的全局配置。记录了页面组成,配置小程序的窗口 背景色,配置导航条样式,配置默认标题。

    app.js

    必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不需要写
    以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

    app.wxss

    这个文件不是必须的。因为它只是个全局CSS样式文件

    app.wxml

    这个也不是必须的,而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的

    有了这两个文件你运行程序,IDE就不会报错了,也意味着这是最简单的微信小程序

    Paste_Image.png

    Hello World

    创建程序实例

    app.js文件管理整个程序的生命周期,所以在里面添加如下代码:(输入App IDE会有提示)

    App({
      onLaunch: function () {
        console.log('App Launch')
      },
      onShow: function () {
        console.log('App Show')
      },
      onHide: function () {
        console.log('App Hide')
      }
    })
    

    具体API解释如下


    Paste_Image.png

    美化ActionBar

    json文件负责配置ActionBar颜色,我们只需要在里面添加如下代码即可,下图有参数说明!

    Paste_Image.png
    Paste_Image.png
    {
        "window":{
            "navigationBarBackgroundColor": "#BBDEF8",
            "navigationBarTitleText": "Demo",
            "navigationBarTextStyle":"white"
        }
    }
    
    Paste_Image.png

    现在看ActionBar是不是像那么回事了!好接下来我们继续写我们第一个界面

    美化页面

    美化页面我们用到了 wxml 和 wxss文件
    为了程序代码结构简洁
    我们需要在跟目录下创建一个新文件夹 名字随意,我们这里叫pages
    然后在pages文件夹里再创建新文件夹 名字随意 这里我们叫 index
    然后我们创建index.wxml文件然后在里面写入以下代码

    <view>
        <text class="window">Hello</text>
    </view>
    

    然后创建index.wxss文件然后在里面写入以下代码

    .window{
      color=#4995fa;
    }
    

    然后我们创建 index.js文件
    在文件中输入如下代码(输入Page IDE会有提示)

    Page({
      data:{
        // text:"这是一个页面"
      },
      onLoad:function(options){
        // 页面初始化 options为页面跳转所带来的参数
      },
      onReady:function(){
        // 页面渲染完成
      },
      onShow:function(){
        // 页面显示
      },
      onHide:function(){
        // 页面隐藏
      },
      onUnload:function(){
        // 页面关闭
      }
    })
    

    函数解释如下:

    Paste_Image.png

    配置首页

    Json文件负责配置页面路径
    所以我们在里面加入如下代码
    其中index的含义 其实就是指index.js文件
    这里需要说明一点 pages 里面的路径其实是指向js文件的
    如果一个目录下没有该名称的js文件是会报错的!

    "pages":[
      "pages/index/index"
    ],
    

    完成了!我们来运行程序!

    Paste_Image.png

    超级Hello World

    为了学习事件绑定,以及如何将数据在页面上更新
    我们来做个超级Hello World,就是我点击文字,能让
    它变色!

    绑定事件

    我们打开index.wxml 将里面代码改成这样

    <view>
        <text catchtap="click" class="window">Hello</text>
    </view>
    

    其实也就是加了

    • catchtap="click"

    这两个属性是什么意思呢 别着急 我会一一解释

    Paste_Image.png

    上图展示了事件的一些的属性名称,这里需要注意红框标注起来的内容,区分出冒泡事件和非冒泡事件,其实冒泡事件就是需要往上面一层容器传递这个事件。

    看了这图 我们再来看 catchtap="click" 的含义
    catch 代表非冒泡事件
    tap 代表点击事件
    所以连在一起就是非冒泡点击事件
    那后面那个click是啥
    click 其实只是个变量名字
    我们在index.js需要用这个名字绑定接收事件的函数
    我们打开index.js
    然后添加如下函数

      click:function(){
        console.log("点击了文字");
      },
    

    添加完后代码长这样 红框中就是 添加的这个代码

    Paste_Image.png

    所以其实点击事件的回调函数 就是 catchtap="click"
    中的 click 后面加上 :function() 构成的
    现在我们来运行程序试试 然后点击文字

    Paste_Image.png

    看是不是调用了 click:function 函数 并且打出了log

    好接下来我们写点击一下变色的逻辑
    那如何让一个文字变色呢,当然是css
    所以我们需要再index.wxss 中添加一个样式

    .window-red{
        color:#D23933;
    }
    
    Paste_Image.png

    然后我们进入index.js文件
    你会发现代码里面有个 data:{} 它不是page生命周期函数
    其实他是个变量的数组,这个里面申请的变量都可以在 wxml中使用

    Paste_Image.png

    我们在这里申请一个color

    Paste_Image.png

    color的值就是index.wxss中的样式名称
    然后进入index.wxml中,将class中的值改成 {{color}}

    Paste_Image.png

    其实意思就是 将js文件中变量 color的值在这里使用
    也就是值等于 window
    然后我们再回到index.js文件
    在最上面申请一个变量控制点击
    然后在click:function() 函数中添加如下代码

     click:function(){
        console.log("点击了文字");
          if(flag){
            color = "window-red";
            flag = false;
          }else{
            color = "window";
            flag = true;
          }
          this.setData({
            color
          });
      },
    

    修改完后的代码如图

    Paste_Image.png

    其实就是在点击是后 更换color变量的值 而更换的这个值其实就是样式的名称

    更新界面数据

    这里有个问题 我们更换完值 但是在wxml中不会立即生效
    所以我们需要调用
    this.setData()方法将值同步给wxml 让它立即生效

    好了我们运行程序 点击Hello 看看是不是点一下 变一下颜色!

    111111.gif

    最后再补充一点 index目录下也是可以配置 json文件的
    也就是每个页面都可以配置自己独特的actionbar颜色等等
    这里的配置会覆盖 app.json文件的配置

    最后附上github 地址 https://github.com/pwh0996/WXDemo.git
    最后由于着急睡觉 ,所以错别字比较多,后面整理望大家见谅

    喜欢的话欢迎打赏~!!!我会继续写下去的



    作者:蒲文辉
    链接:https://www.jianshu.com/p/aaef5ceb3936
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的...
  • 微信小程序开发中网络请求必不可少.GET.POST请求是最常用的.GET请求 POST请求的时候有好几个坑.我已经为大家填好了. wx.request({ url: 'test.php', data: { x: '' , y: '' }, method: "POST", header: { '...
  • 微信小程序开发教程​”以腾讯官方资料为主,系统讲解微信小程序开发的相关的知识点。 全套课程共3篇 微信小程序实战教程(第1篇)——讲解小程序基础知识点,重点讲解小程序开发工具,视图层(View)和逻辑层(App ...
  • 微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个...
  • 微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,...不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具。那么接下来就让我们一起来开始
  • 微信小程序开发教程文档微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程序...
  • 摘要:微信小程序教程合集、微信小程序开发资源合集、微信小程序DEMO合集、微信小程序商店合集、微信小程序经验合集、微信小程序技巧合集 微信小程序开发工具 5款微信小程序开发工具使用报告 微信小...
  • 微信小程序开发入门教程  做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。 微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图:    ...
  • 做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。 微信小程序开发文档链接为:...知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发:  /***************
  • 本篇将帮助读者实现基于 微信开发者工具 &amp; C#环境 下的用户在小程序上的授权登陆。     准备: 微信开发者工具下载地址:...微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/d...
  • 相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言本篇文章将介绍打卡小程序打卡页面相关功能的开发,涉及...
1 2 3 4 5 ... 20
收藏数 140,222
精华内容 56,088
关键字:

微信小程序开发