初试微信小程序

2024-08-23 22:18

文章标签 微信初试程序

本文主要是介绍初试微信小程序，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

微信小程序官网：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;}