官方教程

本文档将带你创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志。

项目github地址

图片 1

1.获取微信小程序的 AppID

这次的小程序提供两种界面,功能简约版与功能加强版,任君选取:简约版:

从今年初微信张小龙演讲提出小程序「前身」——应用号的形态,到9月22日邀请200位开发者开启内测,再到11月3日正式开放公测,小程序已经离我们越来越近……第一波小程序的产品和服务正式上线发布也将很快到来,它或许会深刻影响和改变当前的移动互联网产品形态与市场格局,给创业者带来新的机会。《接招》摘录了「阿拉丁」微信小程序创新论坛深圳站的部分演讲干货。您慢用:

2.创建项目

图片 2

项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在「编辑」里可以查看和编辑我们的代码,在「调试」里可以测试代码并模拟小程序在微信客户端效果,在「项目」里可以发送到手机里预览实际效果。

图片 3

嘉宾

3.编写代码

最关键的,是 app.js、app.json、app.wxss 这三个。其中:

  • .js 后缀的是脚本文件
  • .json 后缀的文件是配置文件
  • .wxss 后缀的是样式表文件。

微信小程序会读取这些文件,并生成小程序实例。

主要功能:1、当日天气:显示用户当地当天的温度范围、天气、风力情况、地点,同时从穿衣指数、洗车指数、感冒指数、运动指数、紫外线强度指数中随机挑选一个作为当日的友情提示,且用户每次打开时都将随机更新友情提示。2、未来天气:显示未来三天的日期、天气、温度范围、风力情况3、整个小程序只有一个页面,用户进入小程序即可得到天气信息,除去了繁杂的信息干扰。加强版:

艾瑞咨询研究院&合伙人 曹军波

app.js

app.js
是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用
MINA 提供的丰富的 API,如本例的同步存储及同步读取本地数据。

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

图片 4图片 5图片 6图片 7

「骑行西藏」微信公众号创办人、前微信公众平台技术负责人 TAOLUO罗智峰

app.json

app.json
是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }

主要功能:1、将信息分为三个tabBar,即“首页”、“生活”、“未来”2、首页显示当时的时间、实时温度、天气及其图标。3、生活页面用来显示穿衣指数、洗车指数、感冒指数、运动指数、紫外线强度指数,同时提供相关的生活建议4、未来显示未来三天和今日的天气温度状况5、三个页面均有定位功能

有可能学院CEO 阿禅

app.wxss

app.wxss
是整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。

.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}

1、页面布局和样式书写2、数据绑定、条件渲染、列表渲染、模板、引用3、位置API、网络请求API4、百度地图API

信恩科技创始人、原265上网导航CTO、DoNews联合发起人 林兴陆

4.创建页面

在这个案例里,我们有两个页面,index 页面和 logs
页面,即欢迎页和小程序启动日志的展示页,他们都在 pages
目录下。微信小程序中的每一个页面的都需要写在 app.json 的 pages 中,且
pages 中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js
后缀的文件是脚本文件,.json 后缀的文件是配置文件,.wxss
后缀的是样式表文件,.wxml 后缀的文件是页面结构文件。

1、发起网络请求需要管理员在后台配置request的域名,且域名必须使用协议https,不能使http2、永远以真机测试为准3、多使用控制台报错信息debug,多使用模板,图片压缩是王道。

图片 8

index.wxml是页面的结构文件:
<view > <view bindtap="bindViewTap" > <image src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text >{{userInfo.nickName}}</text> </view> <view > <text >{{motto}}</text> </view></view>

本例中使用了view、image、text来搭建页面结构,绑定数据和交互处理函数。

具体代码请看github。

A:微信要做的是占据更多用户时间、占据更多应用场景、占据更多服务入口,垄断是商业的本质。中国的TMT行业,特别是互联网行业的发展历程是从1999年到2010年,真正的红利期大概是十一年时期。移动互联网的历史是2011年到2014年,大概四年时间。期间,微信订阅号红利期是从2012年到2013年,只有两年时间。2014年以后,创业成本越来越高,媒体和创业者都在寻找下一个创业风口。

index.js 是页面的脚本文件

在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function{ //更新数据 that.setData({ userInfo:userInfo }) }) }})

直到今年2月份,张小龙提出来微信要做应用号,这可能是下一个风口。风口来的时候,不管是创业者还是投资人,我们认为小程序会缔造一个新的创业机会,我们称之为微信应用的未来创业机会。

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;}

页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖
app.wxss
中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用
app.wxss 中指定的样式规则。

图片 9

index.json是页面的配置文件

页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖
app.json 的 window
中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json
中的默认配置。

A:微信生态包含聊天、熟人社交、微信群、订阅号、服务号、第三方平台等。微信通过开放平台的连接功能,让更多人通过微信平台提供给用户各种各样的服务。小程序生态是开放平台新出现的一种形式。用小程序,扫一扫二维码,用完即走,最适合场景化的问题。比如,大家通过扫码,进入同一个聊天室或者论坛交流,不用担心你加我微信。微信上面有一个场景很符合小程序用完即走的场景,那就是微信支付。

发表评论

电子邮件地址不会被公开。 必填项已用*标注