微信小程序的小记录

1.了解微信小程序(支付宝小程序)
小程序与app有什么不同:
好处:小程序不需要下载手机上,比较容易传播
缺点:留不住用户

2.微信
开发一个项目:
开发网站:
1)选择一个项目框架:tp5/laravel/yii/ci (MVC)—
2)创建一个前端的框架 前端(vue/react) 开发的是网站 开发工具:hbuild/phpstrom
一个后端的框架 tp5/laravel (数据层)
线上的服务器上了
微信小程序中
前端的框架 :微信小程序提供的框架(类似与vue的) —打包,微信平台
server端:tp5/laravel (数据层) —线上的服务器上 jujaoweb.com

3.微信小程序的具体开发流程
3.1 先注册微信小程序的账号的
3.2 开发设置 基本设置
appid appsecret
3.3 server端的项目发布到服务器上之后 web服务器(nginx —http协议)
下载https证书(免费的 阿里云)
配置nginx的 支持https协议的访问
3.4 项目开发过程中 server端项目 本机web服务器上运行 不校验https协议的
3.5 微信接口 针对微信公众号的 部分接口也是支持微信小程序的
工具:
下载 微信开发工具
小程序属于MVVM框架 数据层 视图层 vm层
3.6 小程序的构成 应用app (js, wxml, wxss ,json)–各个页面(page) js wxml wxss json
1.app.json 是当前小程序的全局配置
“pages”: [ 各个界面的路径
“pages/index/index”, //第一个界面 就是默认显示的界面
“pages/logs/logs”
],
2.wxss 类似与css文件 app.wxss 全局样式设置
3.app.js 项目的入口
App({
生命周期调回函数:onLaunch OnShow OnHide
})
4.小程序中的页面创建再pages文件夹中
每个页面创建一个文件夹
js文件(逻辑层) json文件(配置),wxml 文件(html文件) wxss文件(css文件)
5.wxss css
单位:rpx
6.wxml
页面布局 组件
标签构成 :自带的标签 view—div 视图容器 text—文本容器 image:显示图片
7.page
8.视图层和数据层进行数据绑定
wx:for="{{}}"
{{index}}------{{item}}
9.js文件 需要导出当前js模块
moudel.export={
a:a
}
在使用的文件中通过var obj=require(“xxx.js”);
obj.a
10.事件:
手指的按下 移动 抬起 点击 tap bindtap(继续冒泡 往上层级继续找和它相同的事件类型的事件) catchtap (阻止冒泡)
11.修改数据层的方法:
Page:各个页面中的数据记录到data属性的
this.setData({ //修改数据
arr: [1, 2, 3, 4, 5]
});
读取数据层某个变量的值:
var oldArr=this.data.arr;
App 中定义的数据 globalData中 这里面的数据可以在各个界面中去使用的
读取:
//获取应用实例
const app = getApp()
app.globalData.userInfo;
//修改全局变量
app.globalData.userInfo=“xxx”;
******【已解决】微信小程序一个页面修改了全局变量,另一个页面却还是显示该变量的初始值
参考文档:https://blog.csdn.net/yang_ri/article/details/90300432
// 生命周期函数–监听页面显示
onShow: function () {
this.setData({
theGlobalData: app.globalData.theGlobalData
})
},
哪里需要实时呈现全局变量数值,哪里的js文件就需要补上onShow方法中的代码,用点击事件的那种不必使用这个函数。
12.在各个页面中要想得到app中定义的数据 需要先得到app的对象
const app = getApp()
13.小程序常见接口、
1.获取用户基本信息的接口
wx.getSetting 授权
wx.getUserInfo 用户信息 1.应用层已经把用户信息获取到了 2.wx.canIUse("") app.userInfoReadyCallback 3.wx.canIUse("")! 重新调用wx.getUserInfo
1.登录
https://blog.csdn.net/xiaxia_Lin/article/details/96157555
2.数据通信
点击详情 勾选上不校验合法域名
GET/POST https://blog.csdn.net/xiaxia_Lin/article/details/96157555
3.跳转页面

		wx.redirectTo({
   			  url: '../index/index'
   			})
      //跳转页面
        wx.navigateTo({
          url: '../doctrine/doctrine'
        })	

4.数据缓存

       if (wx.getStorageSync('test')){
     	 console.log(wx.getStorageSync('test')) 
  		}else{
  		  wx.setStorageSync("test", "123");
  		}

你可能感兴趣的:(接口)