从零开始带你创建一个贵阳小程序

众易云网络:2019-06-18
文章编辑:小易 阅读次数:0

相关导航 navigation

贵阳小程序本地开发环境搭建

小程序使用微信Web开发者工具作为IDE。微信Web开发者工具是微信官方使用NW.js开发的一个跨平台桌面端应用,好坏先不做评价,至少能用。虽然现在小程序已经有了一些第三方的开发工具,有更多Hack以及更少的限制,但为了教程的简洁这里就不再赘述,有兴趣的同学可以自己去玩玩看。

微信Web开发者工具下载

第三方贵阳小程序开发工具

微信Web开发者工具的安装更是简单,不停点下一步就好了。

创建贵阳小程序项目

按照微信官方简易教程的指引,创建一个新的贵阳小程序定制项目。我们需要打开微信Web开发者工具,扫码登陆,选择开发本地小程序,然后点击新建项目,填入你的小程序AppID,项目名称,目录等等。其实不管你有没有注册小程序,为了方便调试最好都选择无AppID,如果选择无AppID一些API的返回都是本地模拟的,并且没有请求远程服务器的域名限制,反而方便你开发调试。

创建项目的时候我们可以勾选创建quick start项目,来当作我们编写代码的模板,其实这个quick start项目的代码就是微信官方的简易教程中的示例代码,当然如果你有心的话,也可以手动跟着教程把代码敲一遍。

开发者工具简介

创建好项目并打开之后,我们会看到一个类似或者其实根本就是Chrome打开开发者工具并启用移动端模拟的界面。

左边有3个选项卡【编辑】【调试】【项目】,开发的过程中大多数时间里我们都是在【编辑】【调试】之间来回切。

切换到【编辑】选项卡,我们就能看到小程序项目目录以及代码编辑界面。

小程序示例开发

接下来我们会在quick start项目代码的基础上开发一个获取用户位置并显示天气的小程序,一边学习理解小程序的框架设计,一边尝试动手编写代码。

首先每一个贵阳小程序定制都需要声明一个App对象

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

假如你之前了解过React/Vue任意一个框架的话,应该会看到很多他们的影子:

//React
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { secondsElapsed: 0 };
  }

  tick() {
    this.setState(prevState => ({
      secondsElapsed: prevState.secondsElapsed + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return React.createElement(
      "div",
      null,
      "Seconds Elapsed: ",
      this.state.secondsElapsed
    );
  }
}
//Vue
var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  },
  mounted: function () {
    console.log('mounted!')
  },
  updated: function () {
    console.log('updated!')
  },
  destroyed: function () {
    console.log('destroyed!')
  }
})

每一个小程序都会有一个app.json的配置文件,这里面其实有很多好玩的地方:

{
  "pages":[//小程序包含的页面
    "pages/index/index",//页面路径
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2f3b53",//标题栏背景色(这也许是小程序和移动端Web应用最大的不同了)
    "navigationBarTitleText": "Weather",//标题栏文字
    "navigationBarTextStyle":"white"//标题栏文字颜色
  },
  "tabBar": {//配置小程序选项卡,是的,你不需要写多余的导航栏代码,只需要配置一段JSON即可
    "selectedColor":"#73d0f4", //Tab栏选中文字的颜色
    "list": [{//选项卡列表,最多可以配置5项
      "pagePath": "pages/index/index",//对应页面地址
      "iconPath": "assets/images/home_n.png",//Tab选项卡默认图标
      "selectedIconPath": "assets/images/home.png",//Tab选中后的图标
      "text": "首页"//Tab文字
    }, {
      "pagePath": "pages/logs/logs",
      "iconPath": "assets/images/box_n.png",
      "selectedIconPath": "assets/images/box.png",
      "text": "日志"
    }]
  }
}

你可以在quick start项目的基础上把app.json文件修改成如上内容,当然你也可以参考官方配置文档自己折腾一会儿。

另外补充一下,Tab栏的图标当然不是凭空变出来的,你可以在easyicon或者其他类似的网站下载你需要的图标,具体风格可以参考微信底部导航,需要注意的是你要为每个图标准备两个文件,一个默认显示,一个在选中时显示。

制作这样图标文件的最简单办法是在PS中打开图标文件,选择图像->调整->去色并另存为。

小程序页面

小程序的所有页面一般都被保存在pages文件夹里,每一个独立的页面也有自己的文件夹,每个页面都包含自己的js/json/wxml/wxss文件,不管每个文件里有没有内容,你创建的页面只要一次调试编译之后这四个文件都会自动生成。

.js和.json文件可以延伸刚刚介绍过的app.js/app.json文件的概念,页面的这两个文件分别储存每个独立页面的逻辑和配置信息。

.wxml可以理解为.html的阉割版,用来编写小程序页面的内容。

.wxss可以理解为.css的阉割版,用来设计小程序页面的样式。

接下来我们再动手写几行代码,首先把pages/index/index.wxml改写成如下内容:

<!--index.wxml-->
<!--view是wxml中最基本的一种视图容器,你可以把它理解为div一类的东西-->
<view class="container">
  <!--bindtap类似于vue里的v-on:click,用于处理页面元素的事件绑定,待会儿我们会在index.js里看到一个bindViewTap的方法-->
  <view  bindtap="bindViewTap" class="userinfo">
  <!--{{userInfo.avatarUrl}}这类的双花括号和vue简直是一模一样了,用来显示js中的变量,当然也可以包含一些简单的运算和逻辑判断,image你就理解为img标签好了-->
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <!--text可以理解为p标签,当然只是为了方便理解,上述所有的view/image/text等都是小程序预置的界面组件-->
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <!--wx:if完全可以理解为vue当中的v-if,哈哈,其实不如去学学vue吧,weather是一个对象变量,可以用点来访问其属性值-->
  <view wx:if="{{weather.location}}" class="weather">
    <text class="city">{{weather.location.name}}</text>
    <text class="condition">{{weather.now.text}}</text>
    <text class="temp">{{weather.now.temperature}} ℃</text>
  </view>
</view>

接下来在index.wxss的底部添加下列内容,我承认我偷懒了,你可以稍微花点功夫认真设计一下你小程序的外观样式:

.weather {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
}

.city,.condition,.temp {
  width:100%;
  margin-top: 10px;
}

wxss支持不完全的css选择器,引入了名为rpx的尺寸单位等,有关wxss具体可以查看wxss文档

最后到了重头戏,让我们打开index.js,将其改写为如下内容:

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    userInfo: {},
    //这里新增了一个weather变量
    weather: {}
  },
  //事件处理函数,这就是刚刚在index.wxml当中绑定的事件函数
  bindViewTap: function() {
    //将函数的内容改写为我们自定义的一个方法
    this.getLocation()
  },
  //这个自定义方法调用了wx.getLocation和wx.request两个小程序API,用来获取用户位置信息并从远程服务器请求相关天气数据
  getLocation: function () {
    //示例中有很多这样that = this的代码,但我发现最新的开发者工具是支持ES6的,你完全可以用autobinding一类的语法糖来避免这些冗余的绑定代码
    var that = this
    //这是小程序的一个API,用来获取用户的地理位置
    wx.getLocation({
      type: 'wgs84',
      success: function(res) {
        var latitude = res.latitude
        var longitude = res.longitude
        //wx.request用来发起向远程服务器的请求
        wx.request({
          //wx.request访问的远程网址必须是https,这里使用的是很棒的心知天气的API,可以免费注册
          url: 'https://api.thinkpage.cn/v3/weather/now.json?key=xxxxxxxxxxx&location='+latitude+':'+longitude, 
          success: function(res) {
            console.log(res.data.results[0])
            //setData方法可以理解为React当中的setState方法,用来修改我们在开头定义的weather变量,你不能直接通过data.weather来修改,那样的操作会破坏数据绑定
            that.setData({
              weather:res.data.results[0]
            })
          }
        })
      }
    })
  },
  //onLoad是页面的一个生命周期函数,类似于App对象中的,小程序的页面和应用对象都有一系列相关的生命周期函数
  onLoad: function () {
    console.log('onLoad')
    //这里再啰嗦一下,因为对象中的方法this默认指向undefined,所以我们需要手动指定this,这段代码还可以写成:
    /**
    * app.getUserInfo(function(userInfo){
    *    //更新数据
    *    this.setData({
    *      userInfo:userInfo
    *    })
    * }.bind(this))
    * 或者使用es6写成:
    * app.getUserInfo((userInfo) => {
    *    this.setData({
    *      userInfo:userInfo
    *    })
    * })
    */
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
    //that.getLocation()
  }
})

示例中使用的API来自心知天气,你可以免费注册并将API地址中的key=xxxxxxxxxxx替换为你自己的key.

另外要注意的一点是,如果你注册并填写了小程序的AppID,还需要在小程序的设置中填写request请求的合法域名,否则在调试时会报错,而没有填写AppID的小程序则不受这个限制。

之后记得保存所有的文件,刷新小程序页面,我们的天气示例小程序就大功告成啦,现在点击你的微信头像,就可以获取你所在地区的天气信息啦。

如果你注册了小程序,还可以切换到【项目】选项卡,点击预览并通过微信扫码进行真机调试:

到这里我们的教程就告一段落啦,如果你对小程序很感兴趣,可以自己进行更深入的尝试和学习,还有很多在普通网页中无法访问的有意思的API可以玩。

最新签约

 

 LATEST SIGNING

公司新闻

 COMPANY NEWS

常见问题

 

COMMON PROBLEMS

网站建设

 

 WEB CONSTRUCTION

媒体报道

 

 MEDIA REPORTS

网站设计

 

 WEBSITE DESIGN

小程序

 

 MINI APP

行业资讯

 

 INFORMATION

最新签约

 

 LATEST SIGNING

相关阅读 relevant

  • 贵阳微信分销模式是否合法?

    每个企业都会有自己的营销方式,最终的目的都是把产品推广出去,所以有策略的营销显得至关重要。贵阳微信分销营销的方式有很多种类。

    47 2019-07-12
  • 贵阳微信分销系统的介绍

    贵阳微信分销系统是一款以总部布控,发动店员、职员等移动端零售人员发展二级店铺的微信店中店系统,协助企业打造“企业微商城+粉丝微店+员工微店”的多层级微信创客营销模式。基于朋友圈的传播,众易云贵阳微信分销系统可快速复制店铺,轻松将成千上万的粉丝变成微信分销商,快速拓宽销售渠道和提升产品知名度。

    27 2019-07-12
  • 大家觉得贵阳微信分销平台怎么样

    之所以贵阳微信分销市场现在的秩序会如此混乱,其中一个原因就是目前的分销市场充斥着大量的“高价格低价值”的产品。很多急功近利的分销企业为了吸引更多会员,往往为了眼前的一点蝇头小利选择一些烂产品,再以高额返利为噱头。最后,会员是被骗过来了,可是会员重复购买率过低。久而久之,也就没有多少新的会员加入了,就算来了也不是因为产品本身的魅力,而只是为了那高额的返利。

    47 2019-07-11
  • 贵阳微信分销系统有什么好处?

    传统的化妆品,保健品,非处方药,假药以及各种我还没见过的行业,之前就这么做过,某化妆品代理商在四楼里曾经给我拿出一个本子,上面记着谁谁拿货,做国珍粉的,也记着,谁谁拿货谁发展来的,之后不同程度得给予现金或者送给他们更多的货。道理是一样的,代销,给返利。加入三级分销系统后这些人就如鱼得水,有做化妆品的可能觉得我下面说的一张面膜利润两块不可能,其实可能,初期做,一个运营团队加系统加办公室加推广加活动等经费,你能几个月转盈利?几个月转大规模盈利?或者半年后赔的底掉,都有可能。很多人一说你这个东西成本15的东西卖98,我想问问,研发成本算了吗?市场推广算了吗?后勤人员算了吗?活动经费算了吗?场地费用算了吗?损耗率售后成本算了吗?情怀算了吗?情怀算了吗?情怀呢?这一条生产销售到售后链条里更多你想不到的成本在里边,不了解就没有发言权。利润不是恒定的。

    54 2019-07-11
  • 贵阳微信三级分销模式的可行性?

    因为身边有朋友是国内最早一批做微信分销系统的,所以我来回答一下这个问题:首先明确一个概念,传销在很多国家是不违法的,传销中的“层压式推销”是违法的,在中国所说的传销违法大体也指的是这种传销。

    24 2019-06-18
  • 贵阳小程序有多火?小程序前景怎么样?

    现在都在说小程序火,百度、支付宝、今日头条、微信都在主推小程序,小程序真的能影响或改变我们的生活吗?老张准备从如下几个方面去跟大家探讨下。

    34 2019-06-18
  • 从零开始带你创建一个贵阳小程序

    微信推出小程序已经有些天了,相信同学们或多或少都把玩体验过小程序了。今天从零学习前端开发专栏就手把手带你,从零开始撸一个小程序。

    22 2019-06-18
  • 在贵阳做小程序哪家公司性价比高?

    第一个点、来看网络公司自己的网站质量如何,如果自己的形象官网都不重视,做的一般般,还会重视你的吗?就好比连自己都不爱的人你还想要他爱你?

    72 2019-03-15
  • 腾讯赋能小程序,互联网平台拥抱微信小程序已成趋势

    现今再提到小程序,相信众人对其已经不再陌生,因为微信体内的应用已经全面小程序化。无论是微信钱包、看一看、购物、还是朋友圈等,这些细分的版块几乎都已经被小程序占据。虽然小程序至今才正式上线一年又三月不到,但其靠着微信这棵大树以及自身的优势所在,已经对诸多行业带来不小的冲击,这一点是不容反驳的。

    47 2018-09-25
  • 贵阳网络推广SEO优化新闻文案关键词的撰写技巧

    上一篇文章主要讲了关于快速产出客户较为满意的SEO文案的问题,有些小伙伴于是在问,那么具体到每一类SEO文案,有什么撰写技巧,关键词如何自然而然地融入,同时满足配合客户的活动宣传节奏需求呢?今天我们就以“平台类”品牌主SEO新闻稿为例(其他类型我们下次再展开分析),分析针对于此类品牌主的PR稿我们的撰写“套路”

    36 2018-05-29