微信小程序初试

最新推荐文章于 2024-07-24 12:21:11 发布
最新推荐文章于 2024-07-24 12:21:11 发布
阅读量202 收藏
点赞数 1
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_29029173/article/details/85251427
版权

前段时间，微信公布了这样一个重磅炸弹 – 小程序。从没想过，原本作为平台之上的产物向上提升成为平台，因为原本的android应用容量不大，作为小程序这样的存在再次存于微信这样的大体量应用上。

文档中介绍的说法是：
微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
我还是太年轻了，毕竟是微信，敢想也敢做，不得不说腾讯的野心真是大。

原本在他刚出现时就想体验一把了，结果并不是所有人都能体验，而且毕竟刚刚开始还是有许多问题的，所以等到现在~

安装

  1. 小程序有自己的开发软件：
    微信开发者工具
    功能还是很齐全的除了还有些坑以外还是很不错的。当然用webstorm，vscode，甚至atom，sublime也能进行开发。
    他的文件使用了自己的一套格式名称，但依旧是以js进行开发。

  2. 安装之后还需要一些其他的操作才能进入开发
    首先是需要在微信公众平台中进行注册。
    注册完成后进入小程序管理平台，在这里可以管理小程序的权限，查看数据报表，发布小程序等操作。
    接下来在菜单中的进行如下操作：
    开发设置
    保存AppID，等会儿会用到的。
    以及第四步，将需要开发的接口保存在request合法域名内，否则开发时无法进行网络访问。本次还是使用gank的接口进行开发，感谢代码家大大。当然其实这一步不需要也可以，在开发时可以进行一些设置的修改

开发

那么首先，安装完微信开发者工具后打开并登陆，右下角点击添加新项目，这里除了项目目录项目名称外还需要上面步骤中获取到的appId，新建项目。

  1. 目录结构：
    本次使用干货集中营的api。
├── pages                       页面文件夹
│   ├── index                   首页文件夹
│   │   └── index.js            首页js
│   │   └── index.wxml          首页html
│   │   └── index.wxss          首页style
│   ├── main                    主页文件夹
│   │   └── main.js             主页js
│   │   └── main.wxml           主页html
│   │   └── main.wxss           主页style
│   ├── article                 文章页文件夹
│   │   └── article.js          文章页js
│   │   └── article.wxml        文章页html
│   │   └── article.wxss        文章页style
├── utils                       工具文件夹
│   └── Constants.js            全局共享常量
│   └── util.js                 工具类  
├── app.js                      配置js
├── app.json                    小程序配置页
├── app.wxss                    配置style
└── project.config.json         工具配置
  1. 首先是首页：
    效果：
    首页
    点击banner上的图片后：
    首页2

  • 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}}\n小程序试手小Demo</text>
    </block>
  </view>
  <modal no-cancel="true" hidden="{{modalHidden}}" bindconfirm="onConfirmClick">
      <view >
          <image class="modalImage" src="{{meizhi[current].url}}" mode="widthFix"></image>
      </view>
  </modal>
  <swiper class='banner' indicator-dots="true" autoplay="{{isScroll}}" bindchange="EventHandle">
    <block wx:for="{{meizhi}}">
      <swiper-item>
        <image src="{{item.url}}" mode="aspectFit" class="banner-image" bindtap="onImageClick" binderror="imageError"/>
      </swiper-item>
    </block>
  </swiper>
  <button class="enter-main" bindtap="enterMain">进入主页   → </button>
</view>

    上方获取微信头像和昵称是新疆项目时本身自带的内容，修改了一些显示方式和位置，在下方留下足够空间添加了一个banner和一个进入主页的按钮，并且点击banner时能够跳出一个浏览大图的dialog。

  • index.js:

    const app = getApp()
var Constants = require('../../utils/Constants.js');
var Util = require('../../utils/util.js');

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    modalHidden: true,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    meizhi: [],
    current: 0,
    isScroll: true,
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    that = this;
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
    requestMeizhi();
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  imageError: function (e) {
    this.setData({
      meizhi: ['../logo.png', '../logo.png', '../logo.png', '../logo.png', '../logo.png']
    })
  },
  EventHandle:function(event){
    console.info(event)
      this.setData({
        current: event.detail.current,
      })
  },
  onImageClick: function (event) {
    this.setData({
       modalHidden: false,
       isScroll: false,
    })
  },
  onConfirmClick: function (event) {
    this.setData({
      modalHidden: true,
      isScroll: true
    });
  },
  enterMain: function(e) {
    wx.navigateTo({
      url: Constants.PAGE_MAIN,
    })
  },

  /**
     * 生命周期函数--监听页面显示
     */
  onShow: function () {
    this.setData({
      isScroll: true,
    })
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    this.setData({
      isScroll: false,
    })
  },
});
var that;

function requestMeizhi() {
  wx.request({
    url: "https://gank.io/api/data/福利/8/1",
    header: {
      "Content-Type": "application/json"
    },
    success: function (res) {
      if (res == null ||
        res.data == null ||
        res.data.results == null ||
        res.data.results.length <= 0) {
        console.error(Constants.ERROR_DATA_IS_NULL);
        return;
      }
      that.setData({
        meizhi: res.data.results,
      })
    }
  });
}

    包括几个部分，一个是userinfo，这是自带的部分，请求也写好了的。然后是下方banner的请求，数据保存于meizhi数组中，每次只请求前8张。然后是dialog显示的部分，显示时获取当前的资源用于dialog显示，以及停止banner的自动播放。最后是一些点击事件。

  • index.wxss:

    .userinfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: -50px;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 10rpx;
  border-radius: 50%;
  align-items: right;
}

.userinfo-nickname {
  margin-left: 15px;
  font-size: 15px;
  color: #666666;
}

.usermotto {
  margin-top: 50px;
}

.banner-image{
  display: initial
}

.banner{
  box-shadow: 1px 0px 6px #cccccc;
  padding: 5px;
  border-radius: 1%;
  margin: 10px;
  margin-top: 40px;
  width: 70%;
  height: 600rpx;
  position: center;
}

.modalImage{
    margin: auto;
    width: 100%;
    height: 1000rpx
}

.enter-main{
  box-shadow: 1px 1px 1px #cccccc;
  position: relative;
  border-radius: 0;
  color: #fff;
  font-size: 14px;
  margin-top: 40px;
  background-color: #26a69a;
}

    android里有的cardview，同样这里也可以使用一些style属性表现出来。

  1. 列表主页：
    效果预览：
    列表页

  • main.wxml:

    <view>
    <loading hidden="{{hidden}}">
        加载中...
    </loading>
    <view class="card" wx:for="{{AndroidList}}">
        <view class="title-container" id="{{item.url}}&title={{item.desc}}"  bindtap="onItemClick">
         <image class="tag" src="./text.png" ></image>
          <text class="title">{{item.desc}}</text>
        </view>
        <view class="text-container" id="{{item.url}}&title={{item.desc}}" bindtap="onItemClick">
          <text class="author">作者：{{item.who}}</text>
          <text class="time">发布时间：{{item.publishedAt}}</text>
        </view>
    </view>
</view>

    一个请求时显示的加载中的loading组件，主页上为一个列表。

  • main.js:

    const app = getApp()
var Constants = require('../../utils/Constants.js');
var Util = require('../../utils/util.js');

Page({
  data: {
    AndroidList: [],
    hidden: false,
    nextPage: 1,
  },
  onLoad: function () {
    that = this;
    this.setData({
      nextPage: 1,
    })
    requestAndroid(this.data.nextPage);
  },
  onPullDownRefresh(){
    console.info(e.detail)
    this.setData({
      hidden: false,
    })
    requestAndroid(this.data.nextPage);
  },
  onReachBottom(){
    this.setData({
      hidden: false,
    })
    requestAndroid(this.data.nextPage);
  },
  onItemClick(event){
    console.info(event.currentTarget.id)
    wx.navigateTo({
      url: Constants.PAGE_ARTICLE + '?id=' + event.currentTarget.id
    });
  }
})

var that;

function requestAndroid(page){
  console.info(page);
  wx.request({
    url: 'https://gank.io/api/data/Android/20/' + page,
    header: {},
    success: function (res) {
      res.data.results = modifyTime(res.data.results);
      if (page == 1) {
        that.setData({
          AndroidList: res.data.results,
          nextPage: page + 1,
          hidden: true,
        })
      } else {
        that.setData({
          AndroidList: that.data.AndroidList.concat(res.data.results),
          nextPage: page + 1,
          hidden: true,
        })
      }
    }
  })
}

function modifyTime(AndroidList){
  for(var i=0;i<AndroidList.length;i++){
    AndroidList[i].publishedAt = AndroidList[i].publishedAt.substring(5,10);
  }
  return AndroidList;
}

    主要是列表的请求以及loading是否显示的标志位，另外添加了一个上拉加载功能。

  • main.wxss:

    .card{
  box-shadow: 0px 1px 2px #999;
  margin: 15px;
  padding: 10px;
}
.title-container{
  flex-direction: row;
}
.tag{
  width:14px;
  height: 14px;
  margin-right: 5px;
  margin-top: 2px;
}
.text-container{
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.title{
  font-size: 15px;
}
.author{
  color: #999999;
  font-size: 12px;
}
.time{
  color: #999999;
  position: right;
  font-size: 12px;
}

    同样列表页使用一个card的样式显示，这里遇到了一个问题，单个item内标题前添加一个小的图标，没有找到text自带的方法，就自己添加了一个image，又想做到标题长度超过两行省略的动作，但是这样的代码会导致图标和标题不在同一行，暂时还未解决这个问题。

  1. 文章页面：
    小程序非常坑爹的不能打开外链，就是他并没有webview这个功能。很气，又拿他没办法。
    效果预览：
    列表页

  • article.wxml:

    <view class="container">
  <text class="description">小程序不能打开外链，这有啥用？？</text>
  <text class="title">标题：{{title}}</text>
  <image class="imangry" src="./shengqi.jpg" mode="widthFix"></image>
  <text class="url">链接：{{url}}</text>
  <button class="copy" bindtap='onClick'>{{isCopy?"已复制":"复制"}}</button>
</view>

  • article.js:

    Page({
  data: {
    url: '',
    title: '',
    isCopy: false,
  },
  onLoad: function (options) {
    console.info(options.id);
    console.info(options.title);
    this.setData({
      url: options.id,
      title: options.title,
    })
  },
  onClick: function(event){
    wx.setClipboardData({
      data: this.data.url,
      })
    this.setData({
      isCopy: true,
    })
    wx.getClipboardData({
      success: function(res) {
        console.info(res)
      },
      fail: function(res) {},
      complete: function(res) {},
    })
  }
})

    将列表页由点击事件传递过来的url和标题显示于本页，并提供复制。

  • article.wxss:

    .container{
  padding: 10px;
}
.description{
  margin: 20px;
  font-size: 18px;
  color: #555;
  align-items: left;
}
.title{
  font-size: 14px;
  align-items: left;
  margin: 10px;
  color: #555;
}
.imangry{
  width: 70%;
}
.url{
  font-size: 12px;
  color: #777;
  margin: 20px;
}
.copy{
  box-shadow: 1px 1px 1px #cccccc;
  position: relative;
  width: 70%;
  border-radius: 0;
  color: #fff;
  font-size: 14px;
  margin-top: 20px;
  background-color: #26a69a;
}

    无奈的添加一个表情。

  1. 各个配置页面只列出修改了的文件:

  • Constants.js:

    //url相关
var BASE_URL = "https://gank.io/api";

//error相关
var ERROR_DATA_IS_NULL = "获取数据为空，请重试";

//各个page的URL
var PAGE_MAIN = "/pages/main/main";
var PAGE_INDEX = "/pages/index/index";
var PAGE_ARTICLE = "/pages/article/article";


module.exports = {
  BASE_URL: BASE_URL,
  ERROR_DATA_IS_NULL: ERROR_DATA_IS_NULL,
  PAGE_MAIN: PAGE_MAIN,
  PAGE_INDEX: PAGE_INDEX,
  PAGE_ARTICLE: PAGE_ARTICLE
}

    一些全局共享的常量。

  • app.json

    {
  "pages":[
    "pages/index/index",
    "pages/main/main",
    "pages/article/article"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#26a69a",
    "navigationBarTitleText": "干货集中营",
    "navigationBarTextStyle":"white"
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

总结

总的来说，小程序开发还是很方便的，作为纯安卓开发者入手也是很快，只需要一些js基础，不过js和java在逻辑上还是很像的。当然他提供的功能还有许多尚未完善，也有许多的坑还没有填上，期待其发展。

西伯利亚的雪景-
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序初识
封景的博客
05-28 5961
微信小程序 因(ios，android)多平台彼此间并不互通，所以开发需要两个不同平台的开发团推队，所以微信小程序因此诞生。 小程序的优点 快速加载 更强大的能力 原生的体验 易用且安全的微信数据开放 高效和简单的开发 首先 根据自己的情况安装微信小程序的开发版本 下载之后进行注册操作 注册之后在这里拿到AppID(小程序ID) 这个AppID(小程序ID)会在创建项目时用到 开发工具的各个区域 项目的目录结构 这些都删除重新创建自己需要的项目文件，必须在根目录存在pages文件目录 app.js
微信小程序基础一
WEB__QuShiLong的博客
11-12 265
【前言】2019.11.12 【内容】 小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。 小程序开发前准备： ①申请账号 ②安装开发工具 网址：https://mp.weixin.qq.com 编写小程序代码需要专门安装小程序开发工具 小程序开发工具兼容问题 需要注意的是小程序开发工具在 Windows上仅支持 Windows 7 及以上版，在 M...
[微信小程序]动画,从顶部掉花的效果(完整代码附效果图)
热门推荐
a_靖的博客
11-24 1万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： image{ width: 100rpx; height: 100rpx; position: absolute; top: -100rpx; } 如果对您有帮助，请关注我，欢迎加入微信小程序开发交流QQ群（173683866），有问题可以加群问我获取问群里的大神！...
微信小程序中的require方法和request方法
weixin_44691513的博客
02-23 3722
微信小程序中的require方法和request方法 require方法 我们可以通过require()来获取其它文件导出的数据，但要注意的是传给require的路径只能是相对路径。 // 获取指定页面通过module.exports导出的数据 var postsData = require("../../../data/posts-data.js"); request方法 微信小程序的wx.request是微信小程序最早生成的数据库传输模式，数据传输简单明确。接下来，我们来操作下微信小程序如何链接数据库
微信小程序require报错
weixin_54858833的博客
05-14 2933
刚拿到项目，编译的时候发现模块和变量没有引入成功 看了下同事的写法，在app.js上重定义了require 解决 检查微信开发者工具是不是最新版，请不要使用最新版，官方解释： 微信开发工具历史版本下载：微信开发者工具 参考：微信开放社区：require引入报错 ...
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备，尤其是智能手机。它允许开发者在微信内创建原生体验的应用程序，无需通过应用商店即可供用户使用。这个压缩包文件“wechat”很可能包含了...
微信小程序商城系统源码
04-25
微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)...
微信小程序期末大作业-手机商城微信小程序
12-15
微信小程序期末大作业-手机商城微信小程序（免积分下载） 含底部导航，轮播图等等，小程序运行截图请看我的文章介绍：https://blog.csdn.net/weixin_43474701/article/details/135025795
微信小程序点餐系统源码
05-14
微信小程序点餐系统源码是基于Java后台开发和微信小程序前端实现的一种在线餐饮订餐解决方案。这个系统允许用户通过微信小程序直接浏览餐厅菜单，选择菜品，完成下单，并进行支付，为顾客提供了便捷的用餐体验。下面...
使用uniapp开发小程序（基础篇）
weixin_44143876的博客
07-23 743
介绍uniapp项目开始的准备工作，环境配置和文件引用
开源AI智能名片S2B2C商城小程序在社群团购模式中的应用与探索
专注MarTech应用研究与实施方案
07-22 1029
本文深入探讨了开源AI智能名片S2B2C商城小程序在社群团购模式中的创新应用与未来发展。通过详细分析社群团购模式的特征、发展趋势及其面临的挑战，结合开源AI智能名片S2B2C商城小程序的技术优势与实际应用案例，本文提出了一系列旨在提升社群团购效率、优化用户体验、增强商家竞争力的策略。研究表明，该模式不仅能够有效促进商品流通，满足消费者多元化需求，还能通过智能化、个性化的服务提升用户满意度和忠诚度，为电商领域注入新的活力。
PHP上门按摩专业版防东郊到家系统源码小程序
2401_84593645的博客
07-19 706
生活再忙，也别忘了给自己一点小确幸。🎈 试试这款上门按摩专业版小程序吧，让每一次的放松都成为生活中的小高潮，重新找回那份属于自己的宁静与舒适。🛋️ 快来体验，让我们一起说：“疲惫拜拜，活力满满归来！”🚀💖。
JAVA同城服务场馆门店预约系统支持H5小程序APP源码程序
最新发布
2401_84414018的博客
07-24 307
只需动动手指，就能提前锁定你心仪的时间段，享受无缝对接的优质服务。打开手机，选择你想要预约的场馆，浏览可选的时间段，点击确认，就完成啦！无论是想挥洒汗水的健身房，还是放松心情的SPA中心，或是提升技能的培训机构，同城服务场馆门店预约系统都为你覆盖到了。一个平台，满足你所有的预约需求，让生活更加丰富多彩。不定期推出的专属优惠券、会员折扣，让你在享受便捷的同时，还能省下不少开销。我们的预约系统采用高级加密技术，保护你的每一份数据。🔥同城服务场馆门店预约系统：一键预约，便捷生活新体验！🎉专属优惠，尊享不停🎉。
C# 二维码小程序
a876106354的博客
07-24 173
在C#中创建一个能够生成二维码的小程序，你可以使用。你可以通过NuGet包管理器来安装。首先，你需要在你的项目中安装。
基于JAVA+SpringBoot+Vue+uniApp的校园日常作品商品分享小程序
znbcj的博客
07-24 498
基于JAVA+SpringBoot+Vue+uniApp的校园日常作品商品分享小程序是一款专为校园内的学生和教师设计的移动应用程序。该小程序旨在提供一个便捷的平台，让学生和教师能够轻松地分享自己的手工制作、设计作品或二手物品，同时也方便其他用户浏览和购买这些商品。通过这款小程序，校园内的学生们可以轻松地将自己的作品分享给其他同学，增加彼此之间的交流和合作机会；同时，教师们也可以借此平台推广自己的教学成果或者寻找合适的教学资源。此外，该小程序还有助于减少校园内的浪费现象，提高资源的利用率。
为何 APP 和小程序也需进行等保测评
hakksjss的博客
07-24 194
等保测评能够对 APP 和小程序的网络安全防护能力进行全面评估，发现潜在的安全风险，并提出针对性的整改建议，帮助提升其抵御网络攻击的能力，保障系统的稳定运行。**四、遵循法律法规和行业规范** 在我国，网络安全相关的法律法规和行业规范日益完善，对 APP 和小程序的安全要求也越来越明确。**一、保护用户数据安全** APP 和小程序通常会处理和存储大量用户的个人信息和敏感数据，如身份证号码、手机号码、家庭住址、财务信息等。通过等保测评，可以对业务流程中的安全风险进行识别和控制，确保业务的连续性和准确性。
基于JAVA+SpringBoot+uniapp的心理小程序(小程序版本)
znbcj的博客
07-23 706
心理小程序主要给心理医生和用户提供一个心理测试的平台，其中主要功能有用户进行测试，心理医生上传试卷，得到测试结果，贴吧交流，心理医生咨询等等JAVA：Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。
微信小程序开发入门指南
微信小程序是一种轻量级的应用形态，用户无需下载安装即可在微信内便捷地使用。自2017年首次发布以来，它已经构建了一个庞大的开发环境和生态系统，吸引了超过150万的开发者参与，并覆盖了众多行业，每天有两亿活跃...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值