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.发布

  1. 点击右上角上传
  2. 打开微信公众平台,填写小程序信息后才可以发布,然后点击发布
  3. 体验版本只能开发者使用,可以在”成员管理“中添加“体验成员”即可

WechatPro_页面创建的更多相关文章

  1. FireFox Prevent this page from creating addtional dialogs 火狐浏览器 设置 阻止此页面创建更多对话框

    FireFox英文版本老弹出“Prevent this page from creating addtional dialogs”的确认框 FireFox english version alert ...

  2. Asp.Net4.5 mvc4(二) 页面创建与讲解

    一.Contorl 通过目录结构我们可以看到contorllers类的命名方式 命名规则:前缀+Controller. 在看看contorller中的action方法 using System; us ...

  3. weexapp 开发流程(三)其他页面创建

    1.首页 (1)轮播图 步骤一:创建 轮播图 组件(Slider.vue) src / assets / components / Slider.vue <!-- 轮播图 组件 --> & ...

  4. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建

    上一篇教程<asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发>完成了本项目的登录模块,登录后就需要进入后台管理首页了,需要准备一个后台模 ...

  5. 在eclipse中JS页面创建后<%@ page此处就马上就报错

    修改路径:右键点击创建的jsp页面--->Build Path--->Configure Build Path---> Libraries--->Add Libraries-- ...

  6. app进入后台之后接收到通知,点进去进入新的页面,再次进入后台,再点击通知进入页面(,两次通过通知进入的页面,创建了两次,会多一个页面,)解决办法监听

    在点击通知进入的页面的 //UIApplicationWillResignActiveNotification是app即将进入后台的方法 //增加监听使它在进入后台之前pop上一个页面 - (void ...

  7. RabbitMQ 在 web 页面 创建 exchange, queue, routing key

    这里只是为了展示, 在实际开发中一般在消费端通过 注解来自动创建 消费端: https://www.cnblogs.com/huanggy/p/9695934.html 1, 创建 Exchange ...

  8. Dynamics 365利用HTML页面创建实体记录并同步上传附件

    我是微软Dynamcis 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  9. 前端——Vue-cli 通过UI页面创建项目

    在使用该教程创建项目时请先安装vue ui,具体安装方法请百度 1.打开CMD,输入vue ui 2.点击创建按钮,选择项目目录 3.填写项目名 4.配置项目 选择项目所需要的模块

随机推荐

  1. 第四十四篇 入门机器学习——matplotlib基础——实现数据可视化

    No.1. 绘制一条正弦曲线 No.2. 在一张图中绘制多条曲线 No.3. 可以为曲线指定颜色.线条样式 No.4. 可以指定横纵坐标轴的范围 也可以使用: No.6. 可以为每条曲线添加图示 No ...

  2. koa2第一天 安装koa2

    安装全局koa2:npm install -g koa2 -generator 创建一个koa2文件夹:koa2 -e koa2 进入koa2文件夹:cd koa2 安装npm模块:npm insta ...

  3. selenium的元素定位方法-By

    如果在定位元素属性中包含了如ID等元素属性,那么在一个测试中,定位方法具体有哪几种,可以参考by模块中的By类,By的代码如下: class By(object): """ ...

  4. docker为镜像添加SSH服务

    启动并进入容器中 这里用db1容器完成实验. 安装openssh服务和修改sshd配置文件 安装openssh yum install openssh-server openssh-clients - ...

  5. JS高级---复习

    复习 面向过程和面向对象都是编程的思想, 方式不一样 面向过程: 凡事都是亲力亲为, 所有的代码都要自己写, 每一步都要很清楚, 注重的是过程 面向对象: 执行者成为指挥者, 只要找对象, 然后让对象 ...

  6. linux双网卡双网关设置

    https://blog.csdn.net/wangliang888888/article/details/60139499 在给客户做软件部署的时候,客户提出了一个需求,需要用到双网卡双网关,我研究 ...

  7. go基础_切片

    切片创建方式 1.通过数组创建 2.通过内置函数make创建 切片允许的操作 1.追加元素 2.通过内置函数make创建 package main import "fmt" fun ...

  8. find 报错 find: paths must precede expression:

    编写shell脚本,报错,如下面 [root@localhost backup]#find ./ -name mysqldump* -mtime +3 -delete [root@localhost ...

  9. Go_defer

    package main import "fmt" func main() { //外围函数 /* defer的词义:"延迟","推迟" 在 ...

  10. Linux下tail命令的使用方法

    Linux下tail命令的使用方法: linux tail命令用途是依照要求将指定的文件的最后部分输出到标准设备,通常是终端,通俗讲来,就是把某个档案文件的最后几行显示到终端上,假设该档案有更新,ta ...