育知同创-中国HTML5培训、Java培训高品质教育品牌

加入收藏 关于我们 咨询电话:010-82583705
北京
其他分校: 北京校区 深圳校区

▶ 您现在的位置:首页 > 行业动态 > [技术文章]微信小程序(微信应用号)网络开发实践

[技术文章]微信小程序(微信应用号)网络开发实践

时间:2016-10-26 17:36:04  来源:育知同创  作者:育知

  • 本篇文章是我一个好朋友李旭写的,春哥觉得对大家学习小程序有很大帮助,于是征求他的意见转发到公众号,供大家学习使用,(PS:扫描下面二维码回复“0925”获取实战小程序项目下载链接)

     

    1.jpg

     

    微信小程序” 也叫做“微信应用号”,对于用户,它就是在微信里使用应用的方式,点一个按钮、搜一搜、扫一扫、或者一条链接就能打开那个“应用”,不需要下载删除和跳离微信,体验和原生媲美。这对原生app产生了很大冲击,有替代App Store与安卓各大应用市场的趋势,这自然引发了程序员的很大响应,自然我做移动前端的更是按耐不住去尝试下它的魅力。

    它是使用js脚本语言开发,微信提供了一套很优秀的组件供前端开发,集合html+css使用非常方便。但是不支持使用DOM操作。

    微信发布的小程序内测刚两天。工具集成了下列很好的插件:console(控制台)、source(查看源文件)、network(查看网络相关数据)、storage(缓存数据)、appdata(app的数据)、wxml(运行时边看边改css与标签)。

    开发环境配置略过,(环境配置请点击)下面看下练习的网络实战项目界面。

     

    2.jpg

     

    代码解析:
    为了熟悉开发环境以及API只写了一个动态界面。
    一.wxml文件
    <!--index.wxml--><view class="container">
      <modal title="提示" confirm-text="确定" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="modalChange" bindcancel="modalChange">
                {{modalText}}  </modal>

      <view class="listview">
        <block wx:for-items="{{datas}}" wx:for-item="item">
          <view id="{{index}}" class="cellview" bindtap="didSelectCell" >
            <image class="cellimage" mode="scaleToFill" src="{{item.large_avatar}}"/>
            <view class="celllabel">
              <text class="celltext" >{{item.name}}</text>
              <text class="celldetail">{{item.desc}}</text>
            <iew>
          <iew>
        </block>
      <iew><iew>
    wxml类似于html文件,里面的标签全是微信提供的组件标签,里面嵌套了js的数据,这都是与html的区别所在。有个特别的标签block,他综合了html的table标签或安卓listview功能与for循环枚举特性,使用快捷。
    二.wxss文件
    /**index.wxss**/.container {  display: flex;  flex-direction: column;  align-items: flex-start;  padding: 0;
    }.listview {  width: 100%;  background-color: lightgray;
    }.cellview {  background-color: white;  margin-top: 2rpx;  padding: 28rpx;  display: flex;  flex-direction: row;
    }.cellimage{  min-width: 120rpx;  width: 120rpx;  height: 120rpx;  border-radius: 60rpx;
    }.celllabel {  display: flex;  flex-direction: column;  margin-left: 20rpx;
    }.celltext{  font-size: 18px;  margin-bottom: 16rpx;
    }.celldetail {  font-size: 16px;  max-height: 2em;  color: grey;  overflow:hidden;
    }
    漂亮的界面当然离不开css的渲染,这与html里的css一样,不作解释。
    三.js文件
    //index.jsPage( {
      data: {
        datas: [],
        modalHidden: true,
        modalText: "",
      },  /iew加载
      onLoad: function() {    console.log( 'onLoad' )    var that = this

        //网络请求
        wx.request( {
          url: 'https://api.douban.com/v2/user',
          header: {        "Content-Type": "application/json"
          },
          method: "GET",
          data: {
            q: 'iOS',
            count: '30'
          },
          success: function( res ) {        //获取到了数据
            var newData = res.data;        console.log( newData.users );
            that.setData( {
              datas: newData.users
            })
            that.update()
          }
        });
      },  //事件响应

      didSelectCell: function(prama) {    var menuItem = this.data.datas[parseInt(prama.currentTarget.id)] 
        console.log(prama.currentTarget.id);    this.setData({
          modalHidden: false,
          modalText:"点击了第" + prama.currentTarget.id + "位 姓名:"+ menuItem.name
        })
      },

      modalChange: function(e) {    this.setData({
          modalHidden: true
        })
      }

    })
    data下的数据可在wxml里直接使用,所以我们通过这个通道给标签传输数据。app启动后会掉用onLoad方法,在这里进行网络请求获取数据列表展示到界面上。方法简单便于阅读。
    遇到的坑
    1.使用网络请求时报错提示:”URL 域名不合法,请在 mp 后台配置后重试”
    解决方法:修改asdebug.js的代码,注释掉报错的地方,有两处,如下图:
     
    3.jpg
     
    2.加载本地图片与网络图片资源无效
    解决方法:必须在根目录新建文件夹“resources”,并添加一张图片,然后试用可行后,便可加载别的图片。
     
    微信小程序技术交流群:575046175(作者和春哥都是管理员哦) 
     
    4.jpg
     
     
    相关文章

    [技术文章]GitHub 2016 年度开源项目报告都讲了什么?

    [技术文章]“优购网” With React Native and Redux

    [技术文章]YZNode ReactNative开源项目





上一篇:[技术文章]公众平台小程序文档和工具

下一篇:哪里的Web前端培训比较好?


开班信息

Copyright 2016 北京育知同创科技有限公司 京ICP备16004053号