WechatPro_页面创建
1. 全局三个文件,app.js, app.json, app.wxss(名称不可更改)
2.创建Pages目录文件,用来放置各个页面
3.创建页面(页面命名,创建四个文件)
(1)js:页面逻辑实现
(2)json:负责标题栏和一些状态栏
(3)wxml:管理页面有什么
(4)wxss:页面布局
4.在pages内的index页面的wxml中:
把内容单元封装在view内部,<view></view> ,用class方式进行样式更改,类比html
5.标签
图片<image src='图片路径'></image>
文字<text></text>
按钮<button></button>
6.布局
<!-- index.wxml -->
<view class='container'>
<image src="/images/wechat_icon.jpg"></image>
<text>hello world</text>
<button>点击获取昵称和头像</button>
</view>
/* 样式设计 index.wxss*/
.container{
height: 100vh; /*高100视窗,100%是无效的*/
display: flex; /*flex布局方法*/
flex-direction: column; /*垂直布局*/
align-items: center; /* 水平方向居中 */
justify-content: space-around; /*垂直方向分散布局*/
}
7.button属性 点击获取用户信息
<!-- index.wxml -->
<button open-type="getUserInfo" bindgetuserinfo='getMyInfo'>点击获取昵称和头像</button>
<!-- open-type="getUserInfo" 表示激活获取微信用户信息功能
bindgetuserinfo='getMyInfo(可自定义)' 表示获得的数据将传递给自定义函数getMyInfo,名称可自定义-->
// pages/index/index.js
Page({ /**
* 页面的初始数据
*/
data: { },
/**
* 获取用户信息,切记 逗号 ,
*/
getMyInfo:function(e){
console.log(e.detail.userInfo)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
8.wxml定义变量 :{{变量名称}} 即表示变量的内容
9.js:文件中定义变量的方法:data:{变量名称: '变量内容‘, 变量名称: '变量内容‘},
10.修改data变量 :this.setData({变量名称:变量内容, 变量名称:变量内容})
data: {
name: 'Hello World',
src:'/images/wechat_icon.jpg'
},
getMyInfo:function(e){
console.log(e.detail.userInfo)
let info = e.detail.userInfo;
this.setData({
name:info.nickName,//更新名称
src:info.avatarUrl//更新图片来源
})
},
11.修改标题栏app.json
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#663399",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "试一试",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
"sitemapLocation": "sitemap.json"
}
12.发布
- 点击右上角上传
- 打开微信公众平台,填写小程序信息后才可以发布,然后点击发布
- 体验版本只能开发者使用,可以在”成员管理“中添加“体验成员”即可
WechatPro_页面创建的更多相关文章
- FireFox Prevent this page from creating addtional dialogs 火狐浏览器 设置 阻止此页面创建更多对话框
FireFox英文版本老弹出“Prevent this page from creating addtional dialogs”的确认框 FireFox english version alert ...
- Asp.Net4.5 mvc4(二) 页面创建与讲解
一.Contorl 通过目录结构我们可以看到contorllers类的命名方式 命名规则:前缀+Controller. 在看看contorller中的action方法 using System; us ...
- weexapp 开发流程(三)其他页面创建
1.首页 (1)轮播图 步骤一:创建 轮播图 组件(Slider.vue) src / assets / components / Slider.vue <!-- 轮播图 组件 --> & ...
- asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建
上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...
- 在eclipse中JS页面创建后<%@ page此处就马上就报错
修改路径:右键点击创建的jsp页面--->Build Path--->Configure Build Path---> Libraries--->Add Libraries-- ...
- app进入后台之后接收到通知,点进去进入新的页面,再次进入后台,再点击通知进入页面(,两次通过通知进入的页面,创建了两次,会多一个页面,)解决办法监听
在点击通知进入的页面的 //UIApplicationWillResignActiveNotification是app即将进入后台的方法 //增加监听使它在进入后台之前pop上一个页面 - (void ...
- RabbitMQ 在 web 页面 创建 exchange, queue, routing key
这里只是为了展示, 在实际开发中一般在消费端通过 注解来自动创建 消费端: https://www.cnblogs.com/huanggy/p/9695934.html 1, 创建 Exchange ...
- Dynamics 365利用HTML页面创建实体记录并同步上传附件
我是微软Dynamcis 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- 前端——Vue-cli 通过UI页面创建项目
在使用该教程创建项目时请先安装vue ui,具体安装方法请百度 1.打开CMD,输入vue ui 2.点击创建按钮,选择项目目录 3.填写项目名 4.配置项目 选择项目所需要的模块
随机推荐
- JVM的前世今生
前世 jvm的数据区 分别是方法区(Method Area),Java栈(Java stack),本地方法栈(Native Method Stack),堆(Heap),程序计数器(Program Co ...
- Python3爬虫爬取淘宝商品数据
这次的主要的目的是从淘宝的搜索页面获取商品的信息.其实分析页面找到信息很容易,页面信息的存放都是以静态的方式直接嵌套的页面上的,很容易找到.主要困难是将信息从HTML源码中剥离出来,数据和网页源码结合 ...
- Bayer Pattern
在刚加入工作的时候,听到最多的就是RGGB Bayer Pattern.在之前的接触中,一直默认一张图片的每个像素点有RGB三个分量,那“RGGB Bayer Pattern”究竟是什么意思.在网上查 ...
- [thinkphp] 启用__PUBLIC__
我真是受够了,,, 为了解决__PUBLIC__不能用的问题 我折腾了好几天了,然后终于被我找到了原因 解决过程 首先必须贴出来帮助我的人 https://my.oschina.net/u/12630 ...
- 3.创建springboot程序
有两种方式创建springboot项目 第一种方式:在官网上创建(基本上不用) Spring官方提供了非常方便的工具 Spring Initializr:https://start.spring.io ...
- HTML学习(5)标题、水平线、注释
HTML 标题 标题(Heading)是通过 <h1> - <h6> 标签进行定义的. <h1> 定义最大的标题. <h6> 定义最小的标题. 注: 浏 ...
- 【做题笔记】洛谷P1002过河卒
虽说是 dp 入门题,但还是有很多细节需要注意 如果设 \(f_{x,y}\) 为目标地点为 \((x,y)\) 时走的种数,那么答案就是 \(f_{n,m}\) 在不考虑那只讨厌的马的情况下,对于任 ...
- zookeeper linux分布式部署
安装包下载地址:http://mirror.bit.edu.cn/apache/zookeeper,记住要下载那个bin的不要下tar.gz包不然即使你安装了也会报错误: 找不到或无法加载主类org. ...
- JS高级---复习
复习 面向过程和面向对象都是编程的思想, 方式不一样 面向过程: 凡事都是亲力亲为, 所有的代码都要自己写, 每一步都要很清楚, 注重的是过程 面向对象: 执行者成为指挥者, 只要找对象, 然后让对象 ...
- 线性筛-三合一,强大O(n)
校内CJOJ2395by Jesse Liu 筛法三合一 Euler.Möbius.Prime函数 基于数论的积性函数 gcd(a,b)=1 则 ƒ(ab)=ƒ(a)ƒ(b) #include & ...