本文主要是介绍初试微信小程序,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
微信小程序官网:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1475052055364
1.打开微信web开发者工具
双击打开:微信web开发者工具
2.新建项目
点击添加项目。(appid,项目名,项目保存的路劲:可以随便输入。)
3.打开项目
4.项目结构说明
5.编写代码
创建页面
index.wxml
.wxml后缀的文件是页面结构文件
<!--index.wxml--><view ><button bindtap="button_xiaomage">小码哥教育:</button><!-- 轮播图 --><swiper class = "header-swiper" autoplay="true" scroll-x="true" interval="3000" duration="1000"><block wx:for-items="{{ads}}"><swiper-item><image class = "header-swiper-img" src="{{ item.img_url }}" mode="aspectFill" ></image></swiper-item></block></swiper> <!-- scroll列表图 --><scroll-view scroll-y="true" style="height:300%;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"><block wx:for-items="{{ motto }}"><swiper-item><view class="content-text" ><Text style="content-text" >{{item.name}}</Text></view></swiper-item></block></scroll-view></view>
index.wxss
index.wxml界面的css样式
/**index.wxss**/.header-swiper {height: 120px;}.header-swiper-img {width: 100%;height: 320px;}.content-text{width:100%;height:30px;margin: 3px;border-color: #d8d8d8;border-width: 0.5px;border-style: solid;}.content-text{text-align: center;padding-top: 15px;}
index.js
index.wxml界面的需要的js代码
//index.js//获取应用实例var app = getApp()//页面上数据的准备var indexData = {ads:[{"title": "","img_url": "http://mall.520it.com/img/a1.jpg",},{"title": "","img_url": "http://mall.520it.com/img/a2.jpg",},{"title": "","img_url": "http://mall.520it.com/img/a3.jpg",},{"title": "","img_url": "http://mall.520it.com/img/a4.jpg",},{"title": "","img_url": "http://mall.520it.com/img/a5.jpg",}],motto: [{"name":"Android学院"},{"name":"Android学院"},{"name":"UI学院"},{"name":"UI学院"},{"name":"IOS学院"},{"name":"IOS学院"},{"name":"Java学院"},{"name":"Java学院"},{"name":"C++学院"},{"name":"C++学院"},{"name":"H5学院"},{"name":"H5学院"}]}Page({data: indexData,//初始化数据//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},//实现点击小码哥教育跳转到logs界面button_xiaomage (){wx.navigateTo({url: '../logs/logs'})},onLoad: function () {console.log('onLoad')var that = this//调用应用实例的方法获取全局数据app.getUserInfo(function(userInfo){//更新数据that.setData({userInfo:userInfo})that.update()})}})
app.js
app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用MINA提供的丰富的API
//app.jsApp({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}})
app.json
app.json是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释
“pages”:[
“pages/index/index”,
“pages/logs/logs”
]
在这声明引进了两个界面(index,logs)
{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"}}
app.wxss
app.wxss是整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则
/**app.wxss**/.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;}
6.项目运行的效果
感谢:小码哥http://bbs.520it.com/portal.php
项目的下载地址:github
这篇关于初试微信小程序的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!